<div class="wrapper">
 <div>
   <h1>3rd Grade Math</h1>
 <p>This exercise allows you to think of code like a third grade math word problem.<br> 
  How do we solve bigger problems? We break them down.<br> Let's see how we can do that.</p>
<h2>List of summer items for sale:</h2>
<ol>
  <li>Umbrella: $37</li>
  <li>Flip flops: $12</li>
  <li>Bucket: $8</li>
  <li>Sunblock: $6</li>
  <li>Swim trunks: $19</li>
  <li>Sunglasses: $40</li>
  <li>Swimsuit: $23</li>
  <li>Goggles: $15</li>
</ol>
</div>
<div>
  <h2>Problems:</h2>
  <ol>
    <li>
      How much more does the umbrella cost than the swim trunks?
      <ul class="questOne">
        <li class="ansOne">The umbrella costs $__ more than the swim trunks.              <button onclick="calc()">Get Answer</button>
        </li>
    </ul>
    </li>
 <li class="questTwo">
   Janel bought the swimsuit, flip flops, and sunglasses.<br>
   How much did they spend altogether? <span class="ansTwo">___</span> <button>Get Answer</button>
  </li>
  </ol>
</div>
</div>

.wrapper {
  display: flex;
  flex-flow: row nowrap;
}
.wrapper > div {
  max-width: calc((100% / 3) - 20px);
  padding: 10px;
}

//Question 1:

//grab the answer unordered list
const listQuest = document.querySelector('.questOne');
//grab the empty answer element
const listAns = document.querySelector('.ansOne');
//grab the empty answer text
const listAnswer = document.querySelector('.ansOne').innerText;

//Find out price of the umbrella
const umbrella = 37
//Find out price of the swim trunks
const swimTrunks = 19
//Calculate how much more the umbrella costs
function calc(ans) {
//replace the current text with the new answer
  ans = listAnswer.replace('__', `${umbrella - swimTrunks}`);
//remove the blank answer list item from the html
  listAns.remove();
//insert the complete answer
  listQuest.insertAdjacentHTML('beforeend', `<li>${ans}</li>`);
 }