JSFiddle - React, Tailwind, and code Playground

by Hans Lammerts

HTML

<div class="flexcontainer" style="height: 370px; border:1px solid black; justify-content: flex-start;">
    <div class="flexcontainer" style="width: 30%; height: 100%; border: 1px solid red;">
        <select id="nameselect" size="2" style="width: 100%; height: 100%;">
            <?php echo implode( "\n", $options); ?>
        </select>
    </div>
    <div class="flexcontainer" style="width: 35%; height: 180px; margin: 2px; border: 1px solid green; align-self: flex-start;">
        <div class="flexcontainer" style="width: 8%; height: 25px; border: 1px solid tomato; align-self: flex-start;"></div>
        <div class="flexcontainer" style="width: 92%; height: 25px; border: 1px solid tomato; align-self: flex-start;"></div>
    </div>
    <div class="flexcontainer" style="width: 35%; height: 180px; margin: 2px; border: 1px solid blue; align-self: flex-start;">
        <div class="flexcontainer" style="width: 8%; height: 25px; border: 1px solid tomato; align-self: flex-start;"></div>
        <div class="flexcontainer" style="width: 92%; height: 25px; border: 1px solid tomato; align-self: flex-start;"></div>
    </div>
    <div class="flexcontainer" style="width: 35%; height: 180px; margin: 2px; border: 1px solid yellow; align-self: flex-end;">
        <div class="flexcontainer" style="width: 8%; height: 25px; border: 1px solid tomato; align-self: flex-start;"></div>
        <div class="flexcontainer" style="width: 92%; height: 25px; border: 1px solid tomato; align-self: flex-start;"></div>
    </div>
    <div class="flexcontainer" style="width: 35%; height: 180px; margin: 2px; border: 1px solid grey; align-self: flex-end;">
        <div class="flexcontainer" style="width: 8%; height: 25px; border: 1px solid tomato; align-self: flex-start;"></div>
        <div class="flexcontainer" style="width: 92%; height: 25px; border: 1px solid tomato; align-self: flex-start;"></div>
    </div>
</div>

CSS

.flexcontainer {
    display: -webkit - flex;
    display: flex; - webkit - align - items: center;
    align - items: center; - webkit - justify - content: center;
    justify - content: center;
    width: 100 % ;
}