How to give a line break between buttons in css/html?

Question

I have a series of 2 buttons placed in vertical order. The pictorial representation of it is:

The HTML belonging to the buttons is:

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

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

The CSS code which I am using for the combined buttons is:

  @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;
    }

The CSS code which I am using for the individual button is:

    @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;
}

My task is to give a line break in between the two buttons in the following way:

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

Answer 1

First of all if you want o use media queries you should use them with braces, like this:

 @media screen and (max-width: 767px) and (min-width: 320px){
 /*CSS here*/
 }

Here you have a fiddle which contains the basic thinks that you need, you can play with margin to check

Answer 2

You can add a margin-bottom property to the first button, for example:

button1 { margin-bottom: 5px; }

You might also need to also add a display: block as well as span tags byd efault are inline and inline elements are not affected by top/bottom margins.

Answer 3

Add margin-bottom property to the first button