How to align my input checkbox with my paragraphs within a modal?

0

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;
}
    
asked by Nacho Zve De La Torre 21.11.2018 в 20:22
source

1 answer

1

I think a solution can be to create a table, in which in the first column is the flavor of the pulled and the second the checkbox:

<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>
</div>

In this case I have put two examples.

Finally, you make the table occupy all the content of the modal and make the column that contains the input is on the right:

CSS:

.tabla{
  width: 100%;
  border: 1px solid black;
}
.tablaInput{
  border: 1px solid black;
  float: right;
}
    
answered by 21.11.2018 в 20:48