JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
    <img id="b" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQm3jEIkfGsmihCgf2iAOXD6HktQH4XMaq7m4Ia6kedLieWgqG4Cw"/>
</div>
Observe que consego fazer com uma imagem mas quero esse resultado com uma div.<br/><br/>
O bloco "b" deve sempre manter altura proporcional a sua largura.<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <- altere a largura da pagina

CSS

#a {
    width: 35%;
    height: 300px;
    background-color: #c64800;
    float: left;
}
#b {
    max-width: 100%;
}