how to put html elements on the same line as another one code example

Example 1: html maintain text in one line

#parent {
    list-style: none;
    width: 100%;
    height: 90px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

#parent > li {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-color: red;
}

#parent > li:nth-child(even) {
    background-color: blue;
}

Example 2: html maintain text in one line

<ul id="parent">
    <li>Box #1</li>
    <li>Box #2</li>
    <li>Box #3</li>
</ul>