How do I display 2 divs on the same line while keeping a horizontal scroll in the last div?

Question

I am attempting to display 2 divs on the same line using css while keeping a horizontal scroll on the last div. So far I have not been able to make this work. I have a jsfiddle, http://jsfiddle.net/fortesl/h54t1t63/3/ , and code shown below:

HTML:

<div class="title-menu">
<div class="title">
    A long unbreakable name
</div>
</div>
<div class="toolbar-scroll">
<ul>
    <l1>item1</l1>
    <l1>item2</l1>
    <l1>item3</l1>
    <l1>item4</l1>
    <l1>item5</l1>
    <l1>item6</l1>
    <l1>item7</l1>
    <l1>item8</l1>
    <l1>item9</l1>
    <l1>item10</l1>
    <l1>item11</l1>
    <l1>item12</l1>
    <l1>item13</l1>
    <l1>item14</l1>
    <l1>item15</l1>
</ul>
</div>

CSS:

ul {;
list-style-type: none;
}
li {
display: inline;
}

.title-menu {
display: inline-block;
z-index: 1004;
max-width: 540px;
max-heigth: 40px;
}
.title {
display: inline-block;
font-size: 21pt;
text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
letter-spacing: 2px;
height: 47px;
overflow: hidden;
white-space: nowrap;
}
.toolbar-scroll {
overflow: scroll;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}

I am able to display the divs on the same line by setting 'display: inline-block' on the last div, but doing so disables the scroll bar. I need the scroll bar to work.

Thank you.

Answer 1

The easiest way is to wrap them into a wrapper div and make it display:table-row while the two divs you want in a single line will have display:table-cell

http://jsfiddle.net/1z5xtd8x/

Answer 2

Consider the display: table-cell;, it is really pretty handy.

http://jsfiddle.net/h54t1t63/4/

body {
    margin-top: 100px;
}
ul {;
    list-style-type: none;
}
li {
    display: inline;
}

.container { display:table; }

.title-menu {
    display:table-cell;
    z-index: 1004;
    max-width: 540px;
    max-heigth: 40px;
}
.title {
    display:table-cell;
    font-size: 21pt;
    text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
    letter-spacing: 2px;
    height: 47px;
    overflow: hidden;
    white-space: nowrap;
}
.toolbar-scroll {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 3em;
    text-align: bottom;
    width: 100px;
}

<div class='container'>
<div class="title-menu">
    <div class="title">
        A long unbreakable name
    </div>
</div>
<div class="toolbar-scroll">
    <ul>
        <l1>item1</l1>
        <l1>item2</l1>
        <l1>item3</l1>
        <l1>item4</l1>
        <l1>item5</l1>
        <l1>item6</l1>
        <l1>item7</l1>
        <l1>item8</l1>
        <l1>item9</l1>
        <l1>item10</l1>
        <l1>item11</l1>
        <l1>item12</l1>
        <l1>item13</l1>
        <l1>item14</l1>
        <l1>item15</l1>
    </ul>
</div></div>