JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div id="a" class="resp">aaaaaa</div>
    <div id="b" class="resp">bbbbbb</div>
    <div id="c" class="resp">ccccccc</div>
    <div id="d" class="resp">dddddd</div>
</div>

<div class="wrap">
    <div id="a" class="resp fixed">aaaaaa</div>
    <div id="b" class="resp fixed">bbbbbb</div>
    <div id="c" class="resp fixed">ccccccc</div>
    <div id="d" class="resp fixed">dddddd</div>
</div>

CSS

.wrap {text-align: center; margin: 15px auto;}
.resp {display: inline-block; text-align: left; width: 21%; margin-right: 1%;}
.resp.fixed {width: 100px; margin-right: 10px;}

#a {background: #000; color: #fff;}
#b {background: #f00; color: #0ff; visibility: hidden}
#c {background: #0f0; color: #f0f;}
#d {background: #00f; color: #ff0;}