Cost-plus pricing

<div class="cp"><div class="tower"><div id="mark" class="mark">MARKUP <b>$20</b></div><div id="costbar" class="cost">COST <b>$40</b></div></div><div class="controls"><label>COST <input id="cost" type="range" min="20" max="70" value="40"></label><label>MARKUP <input id="rate" type="range" min="10" max="100" value="50"></label><strong id="sell">PRICE $60</strong></div></div>

.cp{display:flex;align-items:end;gap:clamp(14px,5vmin,45px);width:min(90%,500px);height:min(80%,260px);font:900 clamp(10px,max(2.1vmin,1vw),14px)/1.2 sans-serif}.tower{width:34%;height:100%;display:flex;flex-direction:column;justify-content:end;text-align:center}.tower>div{display:grid;place-items:center;transition:height .4s;padding:3px}.tower b{display:block;font-size:clamp(15px,4vmin,27px)}.mark{height:30%;background:var(--accent-2);color:#211b19}.cost{height:55%;background:var(--accent);color:white}.controls{flex:1;display:grid;gap:clamp(8px,2vmin,17px)}label{display:grid;color:var(--muted);gap:2px}input{width:100%;accent-color:var(--accent)}strong{font-size:clamp(20px,6vmin,42px);letter-spacing:-.05em}@media(min-width:700px){body>:first-child{transform:scale(1.25);transform-origin:center}}

const c=document.querySelector('#cost'),r=document.querySelector('#rate');function draw(){const cost=+c.value,mark=Math.round(cost*r.value/100);document.querySelector('#costbar').style.height=(cost/120*100)+'%';document.querySelector('#mark').style.height=(mark/120*100)+'%';document.querySelector('#costbar b').textContent='$'+cost;document.querySelector('#mark b').textContent='$'+mark;document.querySelector('#sell').textContent='PRICE $'+(cost+mark)}c.oninput=r.oninput=draw;setTimeout(()=>{r.value=80;draw()},650);setTimeout(()=>{r.value=50;draw()},2600);