HTML CSS

HOW TO KEEP HTML ELEMENTS ON THE SAME LINE

<div class="wrap-flex">   <p>Foo.</p> <span>Bar.</span>    <img src="img.jpg"/> </div>

.wrap-flex { display: flex; width: 100%; }

.wrap-grid {   display: grid;   grid-template-columns: repeat(3,    minmax(0, 1fr)); }

<div class="wrap-grid">   <p>Foo.</p> <span>Bar.</span>    <img src="img.jpg"/> </div>

.wrap-table { display: table; } .wrap-table > * { display: table-cell; }

<div class="wrap-table">   <p>Foo.</p> <span>Bar.</span>    <img src="img.jpg"/> </div>

CLEARFIX .wrap-float { overflow: auto; width: 100%; } .wrap-float::after { content: ""; clear: both; display: table; }

<div class="wrap-float">   <p>Foo.</p> <span>Bar.</span>    <img src="img.jpg"/> </div>

FLOAT ITEMS .wrap-float > * { display: block; float: left; }