How to give a line break between buttons in css/html?
<p>I have a series of 2 buttons placed in vertical order.  The pictorial representation of it is:</p>

<p><a href="https://i.stack.imgur.com/iAiIK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iAiIK.png" alt="Buttons"></a></p>

<p>The HTML belonging to the buttons is:</p>

<pre><code>&lt;ul class="child"&gt;
                        &lt;!-- ko foreach: subTabs --&gt;
                        &lt;li class="color-dark child active" data-bind="css: {active: $data.selected()}, click: select"&gt;
                            &lt;span data-bind="text: i18n($data.title) "&gt;Current coverage&lt;/span&gt;
                        &lt;/li&gt;

                        &lt;li class="color-dark child" data-bind="css: {active: $data.selected()}, click: select"&gt;
                            &lt;span data-bind="text: i18n($data.title) "&gt;Coverage history&lt;/span&gt;
                        &lt;/li&gt;
                        &lt;!-- /ko --&gt;
                    &lt;/ul&gt; 
</code></pre>

<p>The CSS code which I am using for the combined buttons is:</p>

<pre><code>  @media screen and (max-width: 767px) and (min-width: 320px)
    div.default.tabs ul.child:first-child {
        background-color: #6f7992;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-left: 20px;
        width: auto;
    }

    div.default.tabs ul.child:first-child {
        background-color: #6f7992;
        display: table;
        width: auto;
    }
    .default.tabs ul.child:first-child {
        margin: 0px 20px 2px 0;
        padding: 0;
        width: auto;
    }
</code></pre>

<p><br>
<br>
The CSS code which I am using for the individual button is:</p>

<pre><code>    @media screen and (max-width: 767px) and (min-width: 320px)
    div.default.tabs ul.child:first-child li.child.active {
        color: #0b710c !important;
        background-color: #658B01 !important;
    }
    div.default.tabs ul.child:first-child li.child.active {
        color: #0b710c !important;
        background-color: #dbefb1 !important;
    }
    .benefits.header .inner.current span, .default.tabs ul.child:first-child li.child.active {
        font-weight: bold;
        color: #0074ff;
    }
    .default.tabs ul.child:first-child li.child.active {
        background: url(img/tabs-arrow.png) no-repeat bottom center;
        padding-top: 14px;
        padding-bottom: 15px;
        border: 0;
    }
    @media screen and (max-width: 767px) and (min-width: 320px)
    .default.tabs ul.child:first-child li.child, .default.tabs ul.child:first-child li.child.active {
        border-left: 0px !important;
        display: table-cell;
        position: relative;
    }
    .default.tabs ul.child:first-child li.child, .default.tabs ul.child:first-child li.child.active {
        border-left: 3px solid #fff !important;
        display: table-cell;
        position: relative;
    }
    .default.tabs ul.child:first-child li.child.active {
        background: url() !important;
    }
    .default.tabs ul.child:first-child li.active.child {
        padding-left: 3px;
        padding-right: 3px;
    }
    .default.tabs ul.child:first-child li.child {
        padding: 14px 0;
        list-style-type: none;
        display: table-cell;
        color: #182e5b;
        font-size: 16px;
        min-width: 160px;
        text-align: center;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
        user-select: none;
}
</code></pre>

<p><br>
My task is to give a line break in between the two buttons in the following way:</p>

<p><a href="https://i.stack.imgur.com/pX0c0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pX0c0.png" alt="enter image description here"></a></p>

<p>I have tried changing the value of display property but still I am unable to produce a line break between buttons.</p>