Placing HTML in right place - html

Question

Sup guys. I can't make bew page with blocks to be in the same way as they are meant to be. I have problem with this high block, called "Bags". I tried flex-box, I tried float. Maybe someone can help me in placing everything in the way it was meant to be.
figcaption
{
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
figure
{
position: relative;
cursor: pointer;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
<main>
<figure class="huge">
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure class="normal">
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure class="normal">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="wide">
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure class="normal">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure class="high">
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure class="normal">
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure class="normal">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="big">
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure class="normal">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="normal">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="normal">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
Images:
Model
Result

Answer 1

Try the code below instead the one you are trying.
CSS:
figcaption {
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
figure {
position: relative;
padding: 5em;
cursor: pointer;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
HTML:
<main>
<figure>
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure>
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure>
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure>
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure>
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure>
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure>
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure>
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure>
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure>
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure>
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure>
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
and if you want to increase the size of the image, you can do it and then increase the padding in the css.