How to change my css to achieve the desired layout ？ - html

Question

Hi I am designing a blog site using pure html and css and I have some design in mind. Currently it looks like before graph and I would like to achieve after graph. Right now all these classes are in inline-block and I do not want to change the dom structure. Please refer to this code snippet for implementation:
https://jsfiddle.net/yueeee/vb1we2tk/4/
.container {
padding: 10px 40px;
padding-left: 0px;
width: 100%;
height: 100%;
}
.meta {
position: relative;
display:inline-block;
height: 100%;
width: 10%;
max-width: 200px; /*in large resolution dont always want width to be 12%*/
margin-right: 40px;
/* background-color: transparent; */
padding: 0px 10px;
text-align: right;
vertical-align:top; /*always align to the top of container*/
}
.content {
width: 30%;
display:inline-block;
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
vertical-align:top; /*always align to the top of container*/
}
<div class="container">
<div class="meta">
<div class="time">
<p>2020/12/09<br>22:18:35</p>
</div>
<div class="tag">
<p>tag1</p>
<p>tag2</p>
</div>
</div>
<div class="content post">
<div class="text">
<h2> title </h2>
<p>content<br>content<br>content<br>content<br>content<br>
</p>
</div>
</div>
</div>
The difficulty I met is how do I set metadata's height equals to content. I checked solution on setting container as table and metadata/ content as table-cell. However, it would cause some other styling issue so I still want to keep everything as inline-block. The other way I am thinking is to set the height of metadata equal to container. It failed because container does not height attribute. I tried something like setting height = 100% cause I do not want a stable height but also did not work.
Need your advice.
Before:
After:

Answer 1

The best choice in these cases is to use the flex property. I added some Properties to both the .container and .meta selectors and deleted some, act like code to get the desired result.
.container {
display: flex;
padding: 10px 40px;
padding-left: 0px;
width: 100%;
height: 100%;
}
.meta {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 10%;
margin-right: 40px;
padding: 0px 10px;
text-align: right;
}
.content {
width: 30%;
display:inline-block;
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="container">
<div class="meta">
<div class="time">
<p>2020/12/09<br>22:18:35</p>
</div>
<div class="tag">
<p>tag1</p>
<p>tag2</p>
</div>
</div>
<div class="content post">
<div class="text">
<h2> title </h2>
<p>content<br>content<br>content<br>content<br>content<br>
</p>
</div>
</div>
</div>