gregsdennis's questions

.host {
  width: 500px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: yellow;
}

.left-panel {
  width: 50%;
  margin: 5px;
  flex-direction: column;
  background: pink;
}

.summary {
  margin: 5px;
  background: green;
}

.expand-list {
  margin: 5px;
  background: skyblue
}

.right-panel {
  width: 50%;
  margin: 5px;
  display: flex;
  flex-direction: row;
  background: blue;
}

.image {
  margin: 5px;
  background: red;
}

button {
  margin: auto 5px;
  width: 100px;
}

<div class="host">
  <div class="left-panel">
<div class="summary">
  Here is a long paragraph of text that I need to display.
  It takes up most of the container, but there's an expander
  below that will make this text take up less because the
  expander will take up more when expanded.
</div>
<details class="expand-list">
  <summary>click me</summary>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
</details>
  </div>
<div class="right-panel">
<div class="image">
  <p>
    Don't let this text fool you;
  </p>
  <p>
   it's actually an image.
  </p>
</div>
<button>
  Do it
</button>
  </div>
</div>

div {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  This is really long text that should
  definitely wrap for three lines and
  then terminate in an ellipsis if it's
  still too long, which it definitely is.
  It also needs to be a smaller font size.
</div>
<hr/>
<div>
  This text isn't long enough so it
  should be bigger.
</div>