JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body_replacement">
    <div class="input__container">
        <div class="input__field">
            <input type="checkbox"/> Text 1
        </div>
        <div class="input__field">
            <input type="checkbox"/> Text 2
        </div>
        <div class="input__field">
            <input type="checkbox"/> Text 3
        </div>
        <div class="input__field">
            <input type="checkbox"/> Text 4
        </div>
        <div class="input__field">
            <input type="checkbox"/> Text 5
        </div>
        <div class="input__field">
            <input type="checkbox"/> Text 6
        </div>
    </div>
</div>

CSS

.body_replacement{
    height: 100px;
    background: rgba(0,0,0,.2);
}

.input__field{
    float: left;
    width: 100px;
}

.input__container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 100%;
}

JavaScript

$(document).ready(function(){
    $(".body_replacement").animate({"height": "40"}, 6000);
});