Let’s try displaying the duration with flex.
Make the block with class container
a flex container.
Allocate free space among all flex items.
The first should be given only 1 unit, the second twice as much, the third 6
Elements must be vertically aligned with the baseline
This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task
index.html
<!DOCTYPE html>
<html>
<head>
<title>Months</title>
<style>
.container {
height: 200px;
font-weight: bold;
font-style: italic;
font-size: 20px;
font-family: Tahoma;
}
.item {
background-color: rgb(255, 198, 0);
padding: 40px;
margin: 0 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1 Month</div>
<div class="item">2 Months</div>
<div class="item">6 Months</div>
</div>
</body>
</html>