<div class="card">
  <div class="front side">
    <header>
      <h1><span>Title Modifier</span>Recipe Title</h1>
      <nav class="overview">
        <ul>
          <li>
            <h4>Cook</h4>
            <p>Stove, grill, etc</p>
          </li>
          <li>
            <h4>Serves</h4>
            <p>Number</p>
          </li>
          <li>
            <h4>Prep</h4>
            <p>Time</p>
          </li>
          <li>
            <h4>Cook</h4>
            <p>Time</p>
          </li>
          <li>
            <h4>Level</h4>
            <p>Easy, etc</p>
          </li>
        </ul>
      </nav>
    </header>

    <section class="hero">
      <img src="https://farm3.staticflickr.com/2428/3751522781_9b083e84aa_b.jpg" alt="Squash" />
    </section>
  </div>
  <div class="back side">
    <h2>Recipe Title</h2>
    <section class="recipe-components">
      <div class="ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li><span>1</span> Something</li>
          <li><span>3</span> Another thing</li>
          <li><span>5</span> Things</li>
          <li><span>1/2</span> Thing</li>
          <li><span>1</span> More thing</li>
        </ul>
      </div>
      <div class="method">
        <h3>Method</h3>
        <ol>
          <li>Do this.</li>
          <li>Then do that.</li>
          <li>Next, do this.</li>
          <li>After an hour, do that.</li>
          <li>Before serving, do this.</li>
        </ol>
      </div>
      <div class="tip">
        <h3>Tip</h3>
        <p>Some people say do this, I think they might be right.</p>
      </div>
    </section>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Passion+One:400,900|Roboto:400,900');

$space: .5rem;

* {
  box-sizing: border-box;
  margin: 0 !important;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: $space*1.5;
  color: rgba(31,31,31,.9);
  background: url(https://druryjeff.github.io/better-from-the-source/img/wood.jpg) 50% 50%;
}

.card {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.side {
  width: 40%;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 0 $space*5 #212121;
}

/* Front of Card */

.front {
  display: flex;
  flex-direction: column;
  background-color: #757575;
}

header {
  flex: 1 1 33%;
  display: flex;
  justify-content: space-between;
  padding: $space*2;
  text-transform: uppercase;
  background-color: #ba873a;
  * {
      font-weight: normal;    
  }
  h1 {
    padding: $space 0;
    border-top: $space/4 solid rgba(31,31,31,.9);
    border-bottom: $space/4 solid rgba(31,31,31,.9);
    font-size: $space*3;
    flex-basis: 48%;
    font-family: 'Passion One', cursive;
    span {
      display: block;
      font-size: $space*1.5;
      font-weight: normal;
      text-transform: capitalize;
      letter-spacing: .5px;
    }
  }
  nav {
    padding: $space 0;
    border-top: $space/4 solid rgba(31,31,31,.9);
    border-bottom: $space/4 solid rgba(31,31,31,.9);
    flex-basis: 48%;
    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    li {
      display: flex;
      justify-content: space-between;
    }
    p {
      flex-basis: 60%;
      font-size: $space*1.25;
    }
    h4 {
      flex-basis: 30%;
      letter-spacing: .5px;
      font-weight: 900;
      font-size: $space*1.25;
    }
  }
}

.hero {
  position: relative;
  flex: 1 1 67%;
  background-color: #f7f7f7;
  overflow: hidden;
  display: flex;
  img {
    display: block;

  }
  &:before {
    position: absolute;
    bottom: $space*3;
    right: $space*3;
    z-index: 1;
    content: 'Real Good';
    font-family: sans-serif;
    font-size: $space*3;
    background-color: #212121;
    width: $space*12;
    height: $space*12;
    border-radius: 50%;
    text-align: center;
  }
}

/* Back of Card */

.back {
  padding: $space*2;
  background-color: #d7cbb9;
  h2 {
    font-family: 'Passion One', cursive;
    font-weight: normal;
    font-size: $space*3;
  }
}

.recipe-components {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  ul, ol {
    padding: 0 0 0 $space;
  }
}

.recipe-components > * {
  flex: 1;
}

/* Utility */

.js-hide {
  display: none;
}
View Compiled
const sides = Array.from(document.querySelectorAll(".side"));

function makePortrait(el){
  let r = el.offsetWidth/2;
  sides.forEach(function(el){
    el.style.height = r*3 + "px";
  });
}

function flipCard(){
  sides.forEach(function(el){
    el.classList.toggle("js-hide");
  });
}

function init(){
  makePortrait(sides[0]);
  sides[1].classList.add("js-hide");
  sides.forEach(function(el){
    el.addEventListener("click", function(){
      flipCard();
    });
  });
}

window.addEventListener("resize", function(){
  sides.forEach(function(el){
    // filter out hidden side
    // no height trips up makePortrait()
    if(!el.classList.contains("js-hide")){
      makePortrait(el);
    }
  });
});

init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.