JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container" >
<div class="title">LONG STRINGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
<div class="tags" >
<span class="place-tag" > Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
<span class="place-tag"> Test </span>
</div>
<div style="background-color:blue" >END</div>
</div>
CSS
.container{
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
justify-content: space-around;
}
.title{
background-color:red;
flex-grow:1;
}
.place-tag{
display:inline-block;
}
.tags{
background-color:green;
flex-grow:1;
flex-shrink:1;
display:flex;
justify-content:flex-end;
flex-wrap:wrap;
}