LNG - Square display flex

by Bouteille Dimitri

HTML

<div class="card">
  <div class="media">X</div>
    <div class="content">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>Vestibulum sollicitudin ex gravida, tincidunt nibh ac, placerat urna. Fusce in mauris lectus. Proin porttitor sodales erat, et faucibus augue.</p>
    </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

html {
  padding: 50px;
}

.card {
  background: pink;
  display: flex;
  height: auto;
}

.media {
  background: yellow;
  aspect-ratio: 1 / 1;
}

.content {
  margin: 10px 0 10px 20px;
  background: orange;
}