<div class="info">
  <span> Title </span>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    Dolorem, quam iusto a iste tenetur hic natus sapiente,
    voluptates omnis consequuntur eaque, provident enim? Officiis
    optio sint voluptas nostrum tempore expedita. Lorem ipsum dolor
    sit amet consectetur adipisicing elit. Omnis placeat vitae
    ratione facilis veritatis animi, dolorum at accusantium qui
    asperiores tempore beatae architecto ipsum libero voluptatibus.
    Consequuntur culpa harum veritatis?
  </p>
  <span> Author </span>
</div>

<div class="info">
  <span> Title </span>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic
    nulla inventore quasi ad tempora harum voluptate eius delectus,
    asperiores similique totam nobis aliquam illo autem, quia, porro
    dolor laborum reprehenderit quo perferendis odio temporibus
    deserunt! Necessitatibus nesciunt laborum aperiam consectetur
    qui excepturi deserunt animi tenetur? Quos iusto maiores
    voluptate reiciendis unde possimus accusantium corporis repellat
    commodi cupiditate a, sed deleniti?
  </p>
  <span> Author </span>
</div>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

span:first-child {
  font-size: xx-large;
  font-weight: 900;
}

span:last-child {
  display: block;
  margin-left: auto;
  color: grey;
  text-align: right;
}

/* Additional styling */
.info {
  margin: 24px 2vw;
}

.info span:last-child::before {
  content: "-";
}

html,
body {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  font-family: Roboto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.