<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class='recipe-card'>
  <div style="background:url(https://d2gk7xgygi98cy.cloudfront.net/6267-3-large.jpg) no-repeat 50% 50%; background-size:cover; height: 150px"></div>
  <div class="recipe-card__body">
    <h1 class="recipe-card__heading">Oatmeal Cookies</h1>
    <h2 class="recipe-card__subhead">Crunchy around the edges, softer in the center, these oatmeal cookies feature the nutty taste and nubbly texture of oats. </h2>
    
    <ul class="recipe-card__nav">
      <li>
        <h3 class="active">Ingredients</h3>
      </li>
      <li>
        <h3>Method</h3>
      </li>
    </ul>
    
    
    
    <ul class="recipe-card__ingredients">
    <li>&frac14; cup unsalted butter</li>
    <li>&frac14; cup vegetable shortening</li>
    <li>&frac12; cup light brown sugar</li>
    <li>&frac14; cup granulated sugar</li>
    <li>1 teaspoon vanilla extract</li>
    <li>1 &frac14; teaspoons ground cinnamon</li>
     <li>&#8539; teaspoon ground nutmeg</li>
  <li>1/2 teaspoon salt</li>
  <li>1 teaspoon cider or white vinegar*</li>
<li>1 large egg</li>
  <li>&frac12; teaspoon baking soda</li>
  <li>&frac34; cup All-Purpose Flour</li>
  <li>1 &frac12; cups rolled oats</li>
  <li>1 cup golden raisins, optional</li>
  </ul>
  </div>
  
</div>

body {
  background: #fff;
  font: 13px 'Open Sans', sans-serif;
  color: #222;
}
.recipe-card {
  -webkit-box-shadow: 0px 0px 20px 1px rgba(240,241,243,1);
  -moz-box-shadow: 0px 0px 20px 1px rgba(240,241,243,1);
  box-shadow: 0px 0px 20px 1px rgba(240,241,243,1);
  border:1px solid #f0f1f3;
  width: 300px;
  margin: 50px auto;
}
.recipe-card__body {    
    padding: 20px;
}
.recipe-card__heading {
  padding: 0;
  margin: 0 0 0;
  color: #444;
}
.recipe-card__subhead {
  font-size: 13px;
  color: #555;
  margin-bottom: 30px;
}
.recipe-card__ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 10px;
  column-count: 1;
  li {
    margin-bottom: 5px;
  }
  li:before {
    content: '\2022';
    color: #eb9376;
    margin-right: 5px;
  }
}

.recipe-card__nav {
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid #eb9376;
  li {
    display: inline-block;
    margin-right: 30px
  }
  h3 {
    margin: 0;
    padding: 0;
  }
  h3:after {
    content: '';
    display: block;
    width: 0%;
    padding-top: 10px;
    margin: 0 auto;
    border-bottom: 5px solid #eb9376;
    transition: width 250ms ease-in-out 0s;
  }
  h3:hover {
    cursor: pointer;
  }
  h3:hover:after, h3.active:after {
   width: 100%; 
  }
}

@media (min-width:599px) {
  .recipe-card {
    width: 600px
  }
  .recipe-card__ingredients {
    column-count: 2
  }
}