Estou procurando uma forma de alinhar divs
á esquerda, porém, mante-las divididas em grupos, sem que um grupo quebre a linha. O código abaixo chega perto, mas gostaria de obter o resultado da imagem.
.group {
border-width: 1px;
border-style: solid;
border-color: #008040;
overflow: inherit;
padding:5px;
float:left;
margin-left: 5px;
margin-top:5px;
}
.machine {
float: left;
border-color: red;
height: 75px;
width: 50px;
border-width: 1px;
border-style: solid;
box-sizing:border-box;
}
<div id="group1" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
<div id="group2" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
<div id="group3" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
O código acima me dá este resultado (ATUAL):
Mas eu gostaria de obter este outro resultado (DESEJADO):
É possível?