JSFiddle - React, Tailwind, and code Playground

HTML

<h5>Inline-block</h5>
<div id="container">
    <p>Sample Text 1</p>
    <p>Sample Text 2</p>
    <p>Sample Text 3</p>
</div>
<h5>Float</h5>
<div id="container2">
    <p>Sample Text 1</p>
    <p>Sample Text 2</p>
    <p>Sample Text 3</p>
</div>
<h5>Inline-block + br</h5>
<div id="container">
    <p>Sample Text 1</p><br/>
    <p>Sample Text 2</p><br/>
    <p>Sample Text 3</p><br/>
</div>

CSS

#container, #container2 {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
    display:inline-block;
    background-color: green;
}
#container2 p{
    clear:both;
    float:left;
    background-color: green;
}