JSFiddle - React, Tailwind, and code Playground

HTML

Wish all class list element to have the <b>same width of 50% of the boddy</b> so the 2 first .list get on the first line, the 3rd and 4th on the second line, etc.
<br />
<br />
<div class="full">
    <div class="list"> 
        <span class=" level">hello</span>
        <span class="logic-english">world!</span>

    </div>
    <div class="list">
        <span class=" level">Or should</span>
        <span class="logic-english">I say....</span>

    </div>
    <div class="list">
        <span class=" level">something else</span>
        <span class="logic-english">such as...</span>

    </div>
    <div class="list">
        <span class=" level">Goodbye</span>
        <span class="logic-english">world!</span>

    </div>
</div>

CSS

.full { width: 100%; border: 1px solid #666; padding: 5px; }
.list { border: 1px solid #333; margin: 2px; }

.list { font-size: 0.8em; min-width: 50% ; display: inline; }
.list:nth-child(4n+3), .list:nth-child(4n+4) { background: #FFAAAA; width: 100%; }