JSFiddle - React, Tailwind, and code Playground
HTML
<div class="post-short-footer">
<div class="read-more-post">
<a href="#">Read more</a>
</div>
<div class="post-short-meta-container">
<span>Some text here</span>
<span>Some text here</span>
<span>Some text here</span>
<span>Some text here</span>
<span>Some text here</span>
</div>
</div>
CSS
.post-short-footer {
display: flex;
}
.read-more-post {
display: flex;
align-items: center;
}
.read-more-post a {
border: 1px solid #3b9be5;
padding: 0.6em 0.6em;
border-radius: 0.3em;
white-space: nowrap;
margin-right: 10px;
}
.post-short-meta-container {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.post-short-meta-container span {
padding: 0.3em;
margin: 0.3em;
border: 1px dotted red;
}