É possível fazer isso com float
, bastando alterar a ordem dos elementos no HTML... o direito
deverá vir primeiro e o esquerdo
depois:
/* ESTILOS IMPORTANTES PARA A RESPOSTA */
#esquerdo {
height: 100px;
overflow: hidden;
}
#direito {
width: 50px;
height: 100px;
float: left;right;
}
/* ESTILOS AUXILIARES */
#container {
border: #000000 solid 5px;
margin-top: 10px;
margin-bottom: 10px;
width: 90%;
}
#esquerdo {
background-color: red;
overflow: hidden;
border: 2px solid darkred;
box-sizing: border-box;
}
#direito {
background-color: yellow;
border: 2px solid darkolivegreen;
box-sizing: border-box;
}
<div id="container">
<div id="direito">direito</div>
<div id="esquerdo">esquerdo</div>
container
</div>