Untitled

dabblet.css

*{margin:0;padding:0;box-sizing:border-box;}
body{padding:5px;}
li{list-style: none;}

.top_bar {
	width: 700px;
	height: 30px;
	border: 1px solid #f00;
}

.bar_action {
	background-color: #ccc;
	border-radius: 5px 5px 0 0;
	padding: 10px;
	height: 100%;
	float: left;
}

.bar_action ~ .bar_action {
	margin-left: 1px;
}

.full_action {
	width: 653px;
}

.btn_action {
	width: 44px;
}

.flex {
	display: -webkit-flex;
}

.flex .bar_action {
	-webkit-box-flex: 1;
	float: none;
}

.flex .full_action {
	width: 100%;
}

ul {
	overflow: hidden;
}

li {
	float: left;
}

li ~ li {
	margin-left: 15px;
}

dabblet.html

Eu quero que isso (borda para visualizar o container)
<div class="top_bar v1">
	<ul class="bar_action full_action">
		<li>Do Something</li>
		<li>Do Something</li>
		<li>Do Something</li>
	</ul>
	<div class="bar_action btn_action">
		Go!
	</div>
</div>
<br/><br/>
Que funcione assim, com vários elementos podendo entrar e o primeiro sempre estando esticado
<div class="top_bar">
	<ul class="bar_action full_action">
		<li>Do Something</li>
		<li>Do Something</li>
		<li>Do Something</li>
	</ul>
	<div class="bar_action btn_action">
		Go!
	</div>
	<div class="bar_action btn_action">
		Go!
	</div>
</div>
<br/><br/>
Tipo assim (usando flexbox, mas né, não posso usar flexbox T-T)
<div class="top_bar flex">
	<ul class="bar_action full_action">
		<li>Do Something</li>
		<li>Do Something</li>
		<li>Do Something</li>
	</ul>
	<div class="bar_action btn_action">
		Go!
	</div>
	<div class="bar_action btn_action">
		Go!
	</div>
	<div class="bar_action btn_action">
		Go!
	</div>
</div>
<br/><br/>
Esse caso também pode acontecer
<div class="top_bar flex">
	<ul class="bar_action full_action">
		<li>Do Something</li>
		<li>Do Something</li>
		<li>Do Something</li>
	</ul>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}