En una practica relacionada con html y css tengo un div donde este tiene display: flex y adentro de este div hay otro que tiene iconos pero debo ubicarlo en la parte derecha del div padre. A continuación lo que tengo de código:
<div class="cabeceraOpc">
<input type="checkbox" id="btn">
<label for="btn-menu" id="lbl_btn" class="icon-menu" ></label>
<nav class="menu">...</nav>
<div class="menuIconos">
<i class="icon-search efectoHover"></i>
<i class="icon-user efectoHover"></i>
</div>
</div>
y en el css tengo:
.cabeceraOpc{
width: 100%;
margin: auto;
background: #000;
display: flex;
z-index: 80;
}
#lbl_btn{
width: 30%;
margin-left: 10px;
color: #31B9DD;
font-size: 1.875em;
cursor: pointer;
}
.menu{
position: absolute;
top:103px;
left: 0;
width: 70%;
transform: translateX(-100%);
transition: all 0.7s;
z-index: 80;
}
.menuIconos{
line-height: inherit;
font-size: 1.05em;
background: #000;
display: inline-flex;
margin-right: 5px;
align-items: center;
justify-content: flex-end;
z-index: 80;
}
La clase menu-iconos tiene el display: inline-flex ya que lo utilizo para poder centrar los iconos verticalmente.
Que puedo implementar para que se pueda visualizar este div a la drecha de cabeceraOpc?