Estoy haciendo un footer https://jsfiddle.net/4fcx6r92/:
#footer-container{
width: 100%;
height: 5vw;
background: #e5e4e2;
color: #4c5c68;
font-size: 14px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.shortcuts-container{
border: 3px solid red;
align-items: center;
margin-left: 24vh;
}
.check-btn-container{
display: flex;
flex-direction: row;
border: 3px solid red;
align-items: center;
margin-right: 24vh;
}
#check-answer{
height: 50%;
margin-left: 2%;
}
<footer>
<div id="footer-container">
<div class="shortcuts-container">
<h4>Mejora tu tiempo con los <a href="#">atajos de teclado</a></h4>
</div>
<div class="check-btn-container">
<h4>PULSA INTRO PARA</h4>
<button id="check-answer">Comprobar</button>
</div>
</div>
</footer>
En el #check-btn-container
actualmente el CSS hace saltar la letra "PARA" hacia abajo. Quiero que la frase "PULSA INTRO PARA" aparezca en una sola linea.
Ocurrió cuando puse margin-left en el botón "Comprobar"; entonces la linea no tiene espacio suficiente y por eso salta. El problema es que estoy usando flexbox en en el #check-btn-container
así que no puedo sustituir el margin-left por el incrementar el ancho del div (por ejemplo), ya que entonces el boton se ensancha.
He intentado el incrementar la anchura del div con padding, pero no hace que la linea salga en una sola. Nada cambia al incrementar el padding.
Importante: Necesito que haya margen/espacio entre la frase y el botón obligatoriamente.