HTML CSS

<div class="card">
  <img src="/assets/img/screenshots/Uvpmf92p.jpeg" width="1200" height="1200" alt="The outline of a bar of chocolate with a row of vertical wafers." eleventy:ignore="">
  <h2 class="truncate">Chocolate wafer CSS background - single div'ing</h2>
</div>

.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .truncate:hover {
    overflow: visible;
    white-space: normal;
  }

  /* general styles */
  * {
    box-sizing: border-box;
  }

  body {
    min-height: 100dvh;
    margin: 0;
    padding-inline: 0.5rem;

    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;

    background-color: hsl(0, 0%, 6%);
    color: hsl(0, 0%, 80%);

    display: grid;
    place-items: center;
  }

  /* card styles */
  .card {
    width: 100%;
    max-width: 400px;

    padding: 1rem;
    gap: 1rem;

    display: grid;
    grid-template-rows: auto min-content;

    background-color: hsl(0, 0%, 10%);

    border-radius: 0.25rem;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.4),
      0 0 4px rgba(255, 255, 255, 0.2);

    img {
      width: 100%;
      max-height: 300px;
      object-fit: cover;

      border-radius: 0.25rem 0.25rem 0 0;
    }

    h2 {
      margin: 0;
      font-size: 1.2rem;
    }
  }