JSFiddle - React, Tailwind, and code Playground

HTML

<div class="d1">
    <span>Hello,</span>
    <span class="em">this is a very long and wrapping line with emphasis.</span>
    <span>How are you going to layout me?</span>
</div>
<hr>
<div class="d2">
    <span>Hello,</span>
    <span class="em">this is a very long and wrapping line with emphasis.</span>
    <span>How are you going to layout me?</span>
</div>

CSS

.d1, .d2 {
    width: 240px;
}
div.d1, .d1 span, .d1 .em {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
}
.em {
    color: red;
    font-style: italic;
    font-size: 1.5em;
}