horizontally align and adding div items horizontally - html

Question

I am using following code
<div style="display: table; width: 50%; clear: both; ">
<div style="width: 50%; float: left;">
<h1 style="font-size: 30px; font-weight: 600; color: #000;">
<span><?php echo $genericItem;?></span>
<img style="margin-left: 20px; height: 50px; width: 50px;" src="<?php echo $genericItemPath;?>" alt="">
</h1>
</div>
<div style="width: 50%; float: right; margin-left: 25px;">
<span style="font-size: 20px; color: #000"><b>Reorder</b> in <?php echo $reorderDays;?> days</span>
<span style="display: block; font-size: 12px; color: #d3d3d3; max-width: 90%;"><?php echo $reorderDate;?></span>
</div>
</div>
To create something like this
However the second reorder div is showing below but on right side. How can I modify the div.

Answer 1

I hope this helps. I think that using flex is the best way to make columns and it is the way that works for what you want to do. In addition to that flex is a property that is beginning to be used by modern websites.
.table {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
justify-content: center;
text-align: center;
}
/* extra */
.column2 {background-color: #f8f8f8;}
<div class="table">
<div class="column">Apple</div>
<div class="column column2">
<p><b>Re-order:</b> in 3 days</p>
<p>Tuesday 19-9-2018</p>
</div>
</div>
Update: You can remove justify-content and text-align as well as .column2. I only have them so you can appreciate how the columns would look.

Answer 2

You have width: 50% but also have a margin-left: 25px which is making your second div exceed your screen width.
Try removing the margin-left and in this case the second div should float right.
If you want to add spacing between them, increase the parent width or decrease each divs width.