<div class="float">
  <img src="https://www.chenhuijing.com/demos/grids-sizing/img/florence.jpg" srcset="https://www.chenhuijing.com/demos/grids-sizing/img/florence@2x.jpg 2x" alt="Florence and the Machine, live at Austin City Limits Festival">
  <h1>The Liberation of Florence Welch</h1>
  <p>How Florence and the Machine singer overcame personal demons to write her first-ever Number One album and bring it on the road for her biggest tour yet</p>
</div>

<hr>

<div class="grid">
  <img src="https://www.chenhuijing.com/demos/grids-sizing/img/florence.jpg" srcset="https://www.chenhuijing.com/demos/grids-sizing/img/florence@2x.jpg 2x" alt="Florence and the Machine, live at Austin City Limits Festival">
  <h1>The Liberation of Florence Welch</h1>
  <p>How Florence and the Machine singer overcame personal demons to write her first-ever Number One album and bring it on the road for her biggest tour yet</p>
</div>
@import url("https://fonts.googleapis.com/css?family=Volkhov:400,700");

.float {
  overflow: hidden;

  img {
    float: left;
    width: 65%;
  }

  h1 {
    float: right;
    width: 55%;
    margin-top: -3em;
  }

  p {
    float: right;
    width: 55%;
  }
}

.grid {
  display: grid;
  grid-template-columns: fit-content(55%) minmax(15em, 20%) auto;
  grid-template-rows: 1fr min-content 1vh auto;

  img {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
  }

  h1 {
    grid-row: 2;
    grid-column: 2 / 4;
  }

  p {
    grid-row: 4;
    grid-column: 2 / 4;
  }
}

// General styles
body {
  font-family: "Volkhov", serif;
  font-size: calc(1em + 0.5vw);
  min-width: 20em;
}

div {
  margin-bottom: 1em;
}

h1 {
  font-size: 2em;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0.5em 0;
  padding: 0.25em;
  line-height: 1.1;
}

p {
  line-height: 1.3;
}

img {
  max-width: 100%;
}

hr {
  margin: 2em 0;
}
View Compiled
/*
Content sourced from Rolling Stone magazine: https://www.rollingstone.com/music/music-features/the-liberation-of-florence-welch-it-was-humbling-to-be-heartbroken-183522/
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.