<main>
  <section class="user">
    <div class="profile">
      <img class="profile__image" src="http://source.unsplash.com/IWBSuyANw8c/800x800" alt="Profile shot of Sofia Teixeira" />
      <h1 class="profile__heading">Sofia Teixeira</h1>
    </div>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
  </section>
  <hr />
  <section class="user">
    <div class="profile profile--large">
      <img class="profile__image" src="http://source.unsplash.com/IWBSuyANw8c/800x800" alt="Profile shot of Sofia Teixeira" />
      <h1 class="profile__heading">Sofia Teixeira</h1>
    </div>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
  </section>
<main>
.profile {
  font-size: 3rem;
  display: flex;
  align-items: center;
}

.profile--large {
  font-size: 5rem;
}

.profile > * + * {
   margin-left: 0.5em;
}

.profile__heading {
  font-size: 0.5em;
  line-height: 1.1;
}

.profile__image {
  width: 1.5em;
  height: 1.5em;
  object-fit: cover;
  border-radius: 999px;
  flex-shrink: 0;
  border: 2px solid rgba(0, 0, 0, 0.2);
}


/* Presentational styles */
.user {
  max-width: 75ch;
}

.user > * + * {
  margin-top: 1em;
}

body {
  background: #f9f9f9;
  color: #17717a;
  padding: 1rem;
  line-height: 1.4;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid #ccc;
}

External CSS

  1. https://codepen.io/andybelldesign/pen/Ygmwym.css

External JavaScript

This Pen doesn't use any external JavaScript resources.