html – Weird error with display:inline-block

Question:

I am creating a web and I need to place two div next to each other. I have used display:inline-block and vertical-align:top, but something very strange happens to me: The text of the div on the right is only displayed where it should be if the <p> is one line; the moment I put a long text it goes directly below the div on the left.

.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>

Why is this happening? How can I solve it?

Answer:

SOLVED. Thank you all for responding. The solution was to create a div that spans left-box and right-box and give it a display:flex

Scroll to Top