JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<div class="box1">
    <div class="content">asd</div>
</div>
<div class="box2">
    <div class="content">asd</div>
</div>
<div class="box3">
    <div class="pad">asd</div><div class="content">asd</div>
</div>

CSS

.content {
    margin-left: 10%;
    border: 1px solid red;
}

.content, .pad {
    display: inline-block;
}

.box1, .box2, .box3 {
    width: 1000px;
}

.box1 .content {
    width: 50%;
}

.box2 .content {
    width: 60%;
}

.box3 .content {
    width: 70%;
    margin: 0;
}

.box3 .pad {
    width: 10%;
}