JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-1">
    <div class="coll-1">coll 1</div>
    <div class="coll-2">coll 2</div>
</div>
<div class="container-2">
    <div class="coll-1">coll 1</div>
    <div class="coll-2">coll 2</div>
    <div class="clear"></div>
</div>
<div class="container-3">
    <div class="coll-1">coll 1</div>
    <div class="coll-2">coll 2</div>
</div>
<!--Без clear-->
<div class="container-4">
    <div class="coll-1">coll 1</div>
    <div class="coll-2">coll 2</div>
</div>

CSS

.container-1,
.container-2,
.container-3,
.container-4{
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #333;
    width: 220px;
}
.coll-1,
.coll-2{
    float: left;
    width: 100px;
    height: 50px;
    margin-right: 10px;
}
.coll-1{
    background: #c00;
}
.coll-2{
    background: #0c0;
}

/*Первый вариант -- может обрезать контент...*/
.container-1{
    overflow: hidden;
}
/*Второй вариант -- пустой блок - нехорошо!*/
.clear{
    clear: both;
}
/*Третий вариант -- предпочтительней!*/
.container-3:after{
    content: "";
    display: block;
    clear: both;
}