<div class="note task2">
    <h3>Walk the dog</h3>
    Take puffy out for a walk around the square. He hasn't been out on a
    while because of the lockdown.
  </div>

  <div class="note task3">
    <h3>Prepare dinner</h3>
    Prepare an Indian meal for the dinner. Need to buy veggies though.
  </div>
</div>

CSS.....

• { font-family: sans-serif; }

.parent { position: relative; background-color: #d2d2d2; padding: 10px; margin: 20px; width: 400px; height: 500px; } .note { position: absolute; padding: 10px; width: 200px; opacity: 0.9; }

#headline { position: relative; top: 0px; left: 20px; }

.task1 { background-color: orange; top: 120px; left: 50px; }

.task2 { background-color: greenyellow; top: 220px; left: 150px; }

.task3 { background-color: royalblue; color: white; top: 360px; left: 80px; }