<section class="wrap">
  <h1 class="title">Title</h1>

  <h2 class="sub-title">List</h2>
  <div class="item">
    <h3 class="item__title">Item title</h3>
    <button>click me</button>
  </div>

  <div class="item">
    <h3 class="item__title">Item title</h3>
    <button>click me</button>
  </div>

</section>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  background: red;
  padding: 80px;
}

.title,
.sub-title {
  color: yellow;
  margin: 0 0 0.5em;
}

.item {
  display: flex;
  align-items: center;
  background: blue;
  padding: 15px;
  margin-bottom: 15px;

  .item__title {
    flex: 1 0;
    background: green;
    margin: 0;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.