JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<div class="container">
<div class="row">
<div class="cell col-xs-4">
<div class="widget">
<div class="toolbar-wrapper">
<div class="toolbar">
<ul>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>1</div>
</li>
...
CSS
.cell {
box-sizing: border-box;
padding: 0px, 10px, 0px, 10px;
}
.widget {
border: 1px solid black;
}
.toolbar {
overflow-x: auto;
white-space:nowrap;
display: table-row;
}
.toolbar > ul {
white-space:nowrap;
list-style-type: none;
}
.toolbar > ul > li {
display: inline-block;
margin-right: 5x;
float: left;
}