div table not working with float left and right - html

Question

I am trying to make this table only by using divs because I will use Angular Components in it and, as I know, it's not working with table tag.
This is my code by now,
https://codepen.io/teodora-malec/pen/vQdJPr
I tried display: block for month, kv, date and tag and it worked and then I tried
<div class="wrapper">
<div class="left">
<label class="month">MONTH</label>
</div>
<div class="right month-name">
<label> MONTH-NAME & YEAR </label>
</div>
</div>
because I tried the solution from this question: How to place two divs next to each other?
and it looks like this
should I put the divs differently or my css code is wrong?

Answer 1

It's a good practice to use the class "clearfix", while playing around with float. Here is the link:What is a clearfix?
Secondly, your structure needs to be slightly modified for better /efficient coding. Though I have adjusted your needs in the provided solution, but my suggestion would be to go through your structure design once again.
Here is the working demo:
https://jsfiddle.net/posywj78/
Html
<div class="month-header">
<div class="wrapper clearfix">
<div class="left">
<label class="month">MONTH</label>
</div>
<div class="right month-name">
<label> MONTH-NAME & YEAR </label>
</div>
</div>
<div class="wrapper clearfix">
<div class="left">
<label class="kw">KV</label>
</div>
<div class="right">
</div>
</div>
<div class="wrapper clearfix">
<div class="left">
<label class="date">DATE</label>
</div>
<div class="right">
</div>
</div>
<div class="wrapper clearfix">
<div class="left">
<label class="tag">TAG</label>
</div>
<div class="right">
</div>
</div>
</div>

Answer 2

You should use below style.
<style>
.month, .kw, .date, .tag {
display: flex;
flex-direction:column;
}
.wrapper {
display: flex;
}
</style>