JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<h3>Transparent borders</h3>
<div class="container border">
    <div><p>Hello</p></div>
    <div><p>Hello</p></div>
</div>

<h3>Calc + margin</h3>
<div class="container calc">
    <div><p>Hello</p></div>
    <div><p>Hello</p></div>
</div>

CSS

.container {
    margin: -10px;
}
.container:after {
    display: table;
    content: "";
    clear: both;
}
.container > div {
    float: left;
    padding: 20px;
}
.container.border > div {
    width: 50%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px solid transparent;
    background-clip: padding-box;
    border-radius: 20px;
    background-color: red;
    min-height: 100px;
}
.container.calc > div {
    margin: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: calc(50% - 20px);
    background-color: blue;
    min-height: 100px;
}