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

.card {
  background: pink;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

.media {
  background: yellow;
  aspect-ratio: 1 / 1;
  width: auto;
  height: 100%;
  //margin: 10px 0 10px 10px;
  //max-width: 150px;
}

.content {
  background: blue;
}