<body>
  <div class="listed-item">
    <i class="fa fa-heart-o"></i>
    <p class="listed-item_title">My Favorite Tee</p>
    <p class="listed-item_price">$100</p>
  </div>
  <div class="listed-item">
    <i class="fa fa-heart-o"></i>
    <p class="listed-item_title">My Favorite Sweatshirt</p>
    <p class="listed-item_price">$100</p>
  </div>
  <div class="listed-item">
    <i class="fa fa-heart-o"></i>
    <p class="listed-item_title">My Favorite Skirt</p>
    <p class="listed-item_price">$50</p>
  </div>
</body>

@import url(https://fonts.googleapis.com/css?family=Bitter);
// center 
body {
  align-items: center;
  background: #BB8AB8;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.listed-item {
  align-items: center;
  background: white;
  border-top: 1px solid lightgrey;
  display: flex;
  height: 40px;
  justify-content: space-between;
  padding: 20px;
  width: 90%;
  
  .fa {
    color: #EE96AE;
    font-size: 24px;
    flex-basis: 45px;
  }
  
  > p {
    font-family: 'Bitter', serif;
    font-size: 21px;
  }
  
  .listed-item_title {
    color: #5F5F5F;
  }
  
  .listed-item_price {
    color: #54CACD;
    font-weight: bold;
    margin-left: auto;
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.