For my college project, I am working on a website. However, I have encountered an issue with using a jsp script to display products in a specific way on the webpage. The problem is that I cannot control where the information about price, name, and description of the products is displayed.
Currently, the image is displayed on the left, the product's name is shown in the middle of the image, followed by the description below the image, and then the price. I would like the product's name to be moved to the top right corner of the image, with the description placed underneath it. How can I achieve this?
<section>
<grid>
<c:forEach items="${prodotti}" var="prodotto">
<div class="row">
<div class="col-sm-2">
<a href="#"><img width="100%" src="https://colourlex.com/wp-content/uploads/2017/04/Peach-stone-black-painted-swatch-12010-opt.jpg"></a>
</div>
<div class="col-sm-8">
<a class="testoricercaprodotto" href="Prodotto?id=${prodotto.id}">${prodotto.nome}</a>
<h5>
<p>${prodotto.descrizione}</p>
</h5>
<h6>Price: ${prodotto.prezzo} €</h6>
</div>
</div>
<c:if test="${empty prodotti}">
<div col="1">No products found.</div>
</c:if>
</c:forEach>
</grid>
</section>`