I've been trying for a while but it does not work out in any way. I tried with labels, with paragraphs, but I can not make the checkbox appear next to each of my paragraphs (which are the likes of ice cream)
I need to add a checkbox as much as possible to the right of each of my ice cream tastes.
The only issue is that the tastes are dynamic, they come from the database, but I do not think it is a problem for the eyes anyway ...
Any ideas?
HTML:
<!-- Modal -->
<div id="vasoModal" class="modal">
<div class="modal-content">
<h4 class="modal-title">Vasito</h4>
<h6>Seleccione hasta dos gustos</h6>
<table class="tabla">
<tr>
<td>Dulce de leche con nuez:</td>
<td class="tablaInput"><input class="single-checkbox" type="checkbox"/></td>
</tr>
<tr>
<td>Frutas del bosque</td>
<td class="tablaInput"><input class="single-checkbox" type="checkbox"/></td>
</tr>
</table>
</div>
The logic tells me that this would be fine, but the checkbox like that comes out anywhere else, it is not even visible on the page.
Here CSS if necessary:
.modal {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.modal-title{
text-align: center;
background-color: #D1B091;
width: 100%;
padding: 10px;
}
.flavour{
font-size: 20px;
line-height: 15px;
border-bottom: 1px solid darkgrey;
padding: 10px;
}
h6{
text-align:center;
}
.tabla{
width: 100%;
border: 1px solid black;
}
.tablaInput{
border: 1px solid black;
float: right;
}