JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sup" id="pr">
    <strong>
        <span class="content">content3</span>
        <span class="content">(-content1)</span>
        <span class="content">content4 </span> 
        <span class="content">(-content2)</span>
    </strong>
</div>

CSS

.sup {
    width: 300px;
    border: 1px solid black;
    margin-bottom: 2px;
}
#pr {
    width:100%;
}
.content {
    white-space:nowrap;
}