# Putting two dash table side by side

**URL:** <https://community.plotly.com/t/putting-two-dash-table-side-by-side/50953>\
**Category:** Dash Python\
**Created:** [March 12, 2021, 4:35pm UTC](https://community.plotly.com/t/putting-two-dash-table-side-by-side/50953 "2021-03-12T16:35:09Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [May 7, 2022, 11:55am UTC](https://community.plotly.com/t/putting-two-dash-table-side-by-side/50953/10 "2022-05-07T11:55:54Z")

</div>

Hi @Bambos

I think the best solution is using dash-bootstrap layout component.  
With this tool you can easily manage the layout of the page and also define different layouts for different screen sizes.  
Here is the link:  
[https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/)

If you need only a tip to solve your issue and do not want to learn bootstrap you can add margins in your code, like:

```auto
html.Div(dashtable1, style = {'display':'inline-block',
                              'color': 'white', 'margin-left': 100, 'margin-right';100
                              }),
    
    html.Div(dashtable2, style = { 'display': 'inline-block',
                             'color': 'white'
                             }),

    ] )

```

or align the second element to the right:

```auto
    html.Div(dashtable2, style = { 'display': 'inline-block',
                             'color': 'white', 'float': 'right'
                             }),

```

---

_[View the full topic](https://community.plotly.com/t/putting-two-dash-table-side-by-side/50953)._