Растянуть блок с float
подскажите пожалуйста как я могу растянуть блок желтого цвета чтобы при ресайзинге окна браузера он растягивался до бирюзового автоматически?
PS я новичок.
https://konstantin-voronenko-project1.gunniq.repl.co/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
margin-left: 140px;
}
</style>
</head>
<body>
<div style="background-color: aquamarine">привет участникам</div>
<div style="background-color: yellow; float: left; text-align: left">
<p>Виды спорта:</p>
<ul>
<li>1asdf</li>
<li>2fhdgdfhgfdg</li>
<li>3fdgh</li>
<li>4fdgh</li>
<li>5fdgh</li>
<li>6fdgh</li>
<li>7dfgh</li>
<li>9fdgh</li>
<li>0fdgh</li>
<li>5sdfa</li>
</ul>
</div>
<h2 style="text-align: center; background-color: crimson">футбол</h2>
<div style="margin-left: 100px">
<img src="img/football-team.jpg" width="200" style="float:left; margin: 0 10px 10px">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci beatae cumque dolores illum quasi quibusdam
rerum suscipit. A aliquid aspernatur beatae cum dicta ea eius ex iure, possimus quo voluptatem?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolorem eligendi eos ex facere fugiat
impedit incidunt iste labore laborum libero magnam numquam praesentium, quam quos ratione tempora voluptatem
voluptatum!</p>
</div>
<div style="background-color: aquamarine; clear: both">главное не победа, а участие!</div>
</body>
</html>
