JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<div class="s1">
  <p>Solution 1</p>
  <div>hello</div>
  <div>universe</div>
  
</div>

<div class="s2">
  <p>Solution 2</p>
  <div>hello</div>
  <div>universe</div>
</div>

<div class="s3">
  <p>Solution 3</p>
  <div>hello</div>
  <div>universe</div>
</div>

CSS

div[class] {
  margin:1em;
  padding-bottom: 1em;
  border-bottom:1px dashed #CCC;
  overflow: auto;
}

div > div {
  background:#000;
  color:#FFF;
  padding:1em;
}

/* solution 1: float clear */
.s1 div {
  float:left;
  clear:left;
}

/* solution 2: table */
.s2 div {
  display: table;
}

/* solution 3: break line with psuedo element (after) */
.s3 div {
  display:inline;
  padding:0;
}
.s3 div:after {
  content:"\A";
  white-space:pre;
}