SO-72677128

by David Thomas

HTML

<section class="infobox">
  <main class="popup">
    <aside class="thumb">
      <img class="mini" src="image.jpg">
    </aside>
    <article class="info">
      <h1>Heading Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
    </article>
    <footer class="infofoot">
      <a target="windowid" href="http://example.com">A single line of linked text.</a>
    </footer>
  </main>
</section>

CSS

a {
  text-decoration: none;
}

img.mini {
  width: 20vw;
  height: 20vh;
  float: left;
  padding: 20px 10px 10px 10px;
}

.popup {
  width: 50vw;
  /* using grid layout: */
  display: grid;
  /* setting a gap between adjacent elements of 0.5em (purely aesthetic,
     adjust to your preferences: */
  gap: 0.5em;
  /* naming the three grid areas; here we define two rows (each quoted
     string defines one row) each with two columns, each with named areas.
     The first row has an area named 'thumb' and another named 'article',
     the second has one area that spans both columns, named 'footer'.
     We use the order of the elements in the DOM to place the various
     elements appropriately: */
  grid-template-areas: "thumb article" "footer footer";
}

.infofoot {
  background-color: azure;
  grid-column: span 2;
}