JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<h1>No-float Column CSS</h1>
<h2><a href="http://learnlayout.com/inline-block.html">http://learnlayout.com/inline-block.html</a></h2>

<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>

<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>

<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>

<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>

<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>

<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>

<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>

<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>
	<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>
	<div class="box2 elem"><span class="label">&lt;div class="box2"></span><p>I'm an inline block!</p><span class="endlabel">&lt;/div></span></div>

CSS

.box2 {
  display: inline-block;
  width: 200px;
  /*/height: 100px;*/
  margin: 1em;
  border: red solid 2px;
}
.elem {
  border: solid  #6AC5AC 3px;
  position: relative;
}

.elem p {
  padding: 0 1em;
}

.elem-inline .label, .elem-inline .endlabel {
  position: static;
}

.label, .endlabel {
  position: absolute;
  background-color: #6AC5AC;
  color: #414142;
  line-height: 1em;
}

.label {
  top: 0;
  left: 0;
  padding: 0 3px 3px 0;
}

.endlabel {
  right: 0;
  bottom: 0;
  padding: 3px 0 0 3px;
}