Estoy creando una pagina web donde necesito mostrar texto al costado de una linea vertical, la linea vertical la hice con la etiqueta <br>
y le di un alto de 40px, el texto esta dentro de la etiqueta <p>
, he buscado en Internet y encontré que para alinear elementos utilice inline-block, lo he intentado pero me sigue poniendo el texto debajo de la linea
este es mi codigo html:
<div class="col col-12 col-sm-12 col-md-4 col-lg-4">
<img src="src/images/descarga.jpg" alt="beneficio1"
class="beneficios-image">
<div>
<span style="display: inline-block;">
<hr align="left" class="lineaVertical" width="2px" noshade="noshade">
</span>
<p class="texto-beneficio">
<h5>Lorem ipsum dolor sit amet.</h5>
<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h6>
</p>
</div>
</div>
Este es mi codigo css:
.beneficios-image{
width: 70% !important;
height: 70% !important;
}
.lineaVertical{
background-color: #00ffff;
height: 40px;
}
.texto-beneficio{
display: inline-block;
}
<hr>
en lugar de<br>
. Puedes editar tu pregunta haciendo clic en editar