JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><p>rond</p></li>
    <li class="line"></li>
    <li><p>rond</p></li>
    <li class="line"></li>
    <li><p>rond</p></li>
    <li class="line"></li>
    <li><p>rond</p></li>
</ul>

CSS

* {
    box-sizing: border-box;
}

ul {
    margin:0;
    padding:0;
    list-style:none;
    display:block;
    width:100%;
}

li {
    display:block;
    float:left;
    height:200px;
    background:red;  
    width:22%;
}

li.line {
    width:4%;
}


p {
    display:block;
    width:50%;
}