JSFiddle - React, Tailwind, and code Playground
HTML
<div class="flex">
<span>inline-block with long title</span>
<span>inline-block. just block.</span>
</div>
<div class="block">
<span>inline-block with long title</span>
<br /> <!-- или любой другой разделитель -->
<span>inline-block. just block.</span>
</div>
CSS
/* Часть кода для FLEX-разметки. Общие правила и BLOCK см. ниже */
.flex {
display: flex;
flex-direction: column;
text-align: right;
}
/* Часть кода для BLOCK разметки. Общие правила см. ниже */
.block {
margin-top: 20px; /* просто отделим блок от флексбокса выше */
padding-top: 20px;
border-top: 2px solid red;
text-align: right;
}
/* Общие правила */
span {
display: inline-block;
padding: 5px;
color: #fff;
background-color: #2e2e2e;
margin-top: 10px;
}
span:first-child { /* из-за br приходится так */
margin-top: 0;
}