``````
<div class="wrapper">
<div>
<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>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);
}
``````
``````//Question 1:

const listQuest = document.querySelector('.questOne');
const listAns = document.querySelector('.ansOne');

//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();