# Two graphs, side by side

**URL:** <https://community.plotly.com/t/two-graphs-side-by-side/5312>\
**Category:** Dash Python\
**Created:** [August 9, 2017, 5:46pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312 "2017-08-09T17:46:37Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [August 9, 2017, 7:04pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/2 "2017-08-09T19:04:20Z")

</div>

CSS is a good way to do this. Here’s an example using the default style sheet ([https://codepen.io/chriddyp/pen/bWLwgP](https://codepen.io/chriddyp/pen/bWLwgP)):

```auto
import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()
app.layout = html.Div([
    html.Div([
        html.Div([
            html.H3('Column 1'),
            dcc.Graph(id='g1', figure={'data': [{'y': [1, 2, 3]}]})
        ], className="six columns"),

        html.Div([
            html.H3('Column 2'),
            dcc.Graph(id='g2', figure={'data': [{'y': [1, 2, 3]}]})
        ], className="six columns"),
    ], className="row")
])

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

if __name__ == ' __main__':
    app.run_server(debug=True)

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/315406822995abe6ebfc2b34e83e54ea4cfdf734.png)

---

_[View the full topic](https://community.plotly.com/t/two-graphs-side-by-side/5312)._