JSFiddle - React, Tailwind, and code Playground
HTML
<section class="block">
Block:
<div>1</div>
<div>2</div>
</section >
<section class="inline">
Inline:
<div>1</div>
<div>2</div>
</section >
<section class="inline-block">
Inline-Block:
<div>1</div>
<div>2</div>
</section >
<section class="block nowidth">
Block without width:
<div>1</div>
<div>2</div>
</section >
<section class="inline-block">
Inline-Block with linebreak:<br>
<div>1</div><br>
<div>2</div>
</section >
CSS
div {
width: 20px;height: 20px;
margin: 20px;
background: #cee;
}
section { border: solid 1px #ccc;}
.inline div {
display: inline;
}
.inline-block div {
display: inline-block;
}
.block div {
display: block;
}
.block.nowidth div {
display: block;
width: auto;height: auto;
margin: 20px;
background: #cee;
}