JSFiddle - React, Tailwind, and code Playground

by lborgman

HTML

<div id="container">
    <div>hi <span>there</span></div>
    <div>hi</div>
    <div>hi</div>
    <div>hi</div>
    <div>hi</div>
</div>

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#container {
    background: green;
    width: 80%;
    height: 300px;
    margin-left: 0;
    margin-right: auto;
    xfont-size: 0;
}
#container div {
    background: #ccf;
    border: 1px solid yellow;
    display: inline-block;
    float: left;
    width: calc((100% - 15%) / 3 - 1px);
    height: 100px;
    margin-right: 5%;
    margin-left: 0;
}
x #container div:nth-child(3) {
    margin-right: 0;
}
#container div:first-child {
    background:orange;
    width: calc(((100% - 15%) / 3 - 1px) * 3 + 10%);
    font-size:2em;
}
#container div:first-child span {
    color: red;
}