Tengo 2 Divs horizontales (no aparecen horizontales pero si, lo están), necesito ocultar el div izquierdo con transition y dejar el div derecho centrado, la idea es que al apretar un boton que esta en el medio de los dos div, se oculte el div izquierdo. . He probado escondiendo el div pero no es la idea, la idea es que tenga la transicion ocultandose.
He probado con de todo y no estoy pudiendo solucionarlo, si alguien me puede dar una mano se lo agradezco de antemano
.col {
display: flex;
}
.izq {
margin-top: 20px;
min-width: 35%;
padding: 5px;
transition: 0.5s;
overflow: hidden;
transition: opacity 0.5s linear;
}
.der {
min-width: 60%;
max-width: 100%;
}
.ocultar {
height: 10%;
border-radius: 50%;
width: 35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div className="col">
<div className="izq">
<label>izquierdo</label>
</div>
<div>
<button className="ocultar">Ocultar</button>
</div>
<div className="der">
<label>derecho</label>
</div>
</div>