#container {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: auto;
  background-color: slategray;
  padding: 10px;
  margin: 0 auto;
}
#container > div {
  background-color: gainsboro;
  padding: 5px;
}

<div id="container">
  <div><p>What?</p>
  </div>
  <div>
    <p>What?</p>
  </div>
  <div>
    <p>max-content sizingキーワードは、コンテンツの固有の最大幅または高さを表します。 テキストコンテンツの場合、これは、オーバーフローが発生してもコンテンツがまったく折り返されないことを意味します。<br><span class="property">1fr</span></p>
  </div>
</div>