<div class="card">
  <header>
    <h2>Sauces</h2>
    <button>
      <svg viewBox="0 0 512 512" width="100" title="plus-circle">
        <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z" />
      </svg>
    </button>
  </header>
  <div class="card-content">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta veritatis harum impedit possimus delectus doloremque, eligendi cupiditate sunt animi non quisquam architecto iure. Inventore accusantium eos laudantium, delectus deserunt rerum?</p>
  </div>
</div>
body {
  background: #444;
  font: 100%/1.35 system-ui;
}
.card {
  background: white;
  border-radius: 4px;
  overflow: hidden;
  width: 300px;
  resize: both;
  header {
    background: #eee;
    border-bottom: 1px solid #ccc;
    padding: 1rem;

    // Possibility
    display: grid;
    grid-template-columns: 1fr min-content;
    gap: 1rem;

    // Flex is probably the most common answer
    // display: flex;

    h2 {
      margin: 0;
      // Possibility: grow the size of this
      // flex-grow: 1;

      // Possibility: push the button away
      // margin-inline-end: auto;
    }
    button {
      cursor: pointer;

      // Possibilty: push self away
      // margin-inline-start: auto;

      // Possibility:
      // position: absolute; (and friends, like padding to make space)
    }
  }
}
.card-content {
  padding: 1rem;
  p {
    margin: 0;
  }
}
button {
  border: 0;
  background: none;
  svg {
    fill: green;
    width: 22px;
    height: 22px;
  }
}

* {
  padding: 0;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.