JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="vertical">
    <div>First vertical block</div>
    <div class="horizontal">
        <div>H1</div>
        <div>H2</div>
        <div>H3</div>
        <div>H4</div>
        <div>H5</div>
    </div>
    <div>Second vertical block</div>
</div>

CSS

.horizontal{
    float: left;
    border: 1px solid green
}

.horizontal  *{

    display: inline-block;
    margin-left: 10px;
}

.vertical {
    float: left;
    width: 100%;
    border: 1px solid blue
}

.vertical  > *{
    display :block;
    width: 100%;
}