Aligning div elements (css, html)

Question

I'm a beginner when it comes to HTML and CSS and I'm struggling to position some div elements as described in the image intended outcome. I've centered the table with margin-left: auto and margin-right: auto. I want the text div-element to be aligned right above the table. Is there any good way to do that?

Any help is much appreciated.

Answer 1

Put them both in another div that will be centered inside the box

Set the table width and the div width.

<div id="wrapper-div" style="margin:auto; width:XXpx">
    <div id="text-div" style=""></div>
    <div id="table-div"></div>
</div>

The wrapper div should have the same width as the table div.

Answer 2

There are many ways to do this, as you are trying you can try adding the following css style:

 display:inline-block