Estoy creando una web y necesito colocar dos div uno al lado de otro. He usado display:inline-block y vertical-align:top, pero me ocurre algo muy raro: El texto del div de la derecha sólo se muestra donde debe si el <p>
es de una línea; en el momento en que pongo un texto largo se pasa directamente a debajo del div de la izquierda.
.caja-trabajo {
border: 1px solid lightgrey;
background-color: white;
position: relative;
}
.caja-titulo {
background-color: #efefef;
border-bottom: 1px solid lightgrey;
padding: 5px;
padding-left: 10px;
}
.caja-titulo p {
margin:0px;
}
.caja-izquierda {
padding: 10px;
display: inline-block;
}
.foto-empresa {
border: 1px solid lightgrey;
}
.descripcion-empresa {
background-color: #efefef;
border: 1px solid lightgrey;
}
.descripcion-empresa p {
font-weight: bold;
margin: 5px;
text-align: center;
}
.caja-derecha {
display: inline-block;
vertical-align: top;
padding: 5px;
}
.caja-derecha p:first-child {
text-decoration: underline;
}
<div class="caja-trabajo">
<div class="caja-titulo">
<p>Mayo 2013 - Mayo 2015</p>
</div>
<div class="caja-izquierda">
<div class="foto-empresa"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"></div>
<div class="descripcion-empresa"><p style="font-weight: bold">Hola</p></div>
</div>
<div class="caja-derecha">
<p>Descripción</p>
<p>Roger Torrent recogió este sábado la estela de Carme Forcadell y orquestó un frente -en el que logró integrar a los comunes- para plantar cara a la Justicia y proseguir con el desafío al Estado que inauguró su antecesora en el cargo cuando aprobó las «leyes de desconexión» y permitió aprobar la declaración unilateral de independencia en el Parlament.Tomando el testigo de la diputada republicana hoy procesada y encarcelada, Torrent mantuvo convocado el Pleno de investidura, pero no permitió votar al aún candidato a la Presidencia de la Generalitat, Jordi Turull -como le había pedido antes de ingresar en prisión- para evitar desobedecer explícitamente al Tribunal Constitucional y aumentar la nómina de independentistas investigados.</p>
</div>
</div>
¿Por qué pasa esto? ¿Cómo lo puedo solucionar?