Have side-by-side elements

Question

Good morning, everyone,

I’m trying to align an image with a table, but I’m not getting it. Can someone help me to identify what’s missing?

Follows code below:

index.html

<section id="view_patient">

            <div id="print_boneco">
                <h2 id="title_view_patient">
                  Paciente 
                  <?php while($dado = $name->fetch_array()){ ?>
                  <?php echo $dado["patient_name"]; ?> 
                  <?php }?>
                </h2>
                <img src="print-corpo-pain-free.jpg" alt="print-boneco" id="print_boneco_app" width="300" height="500" />
          </div>

          <div id="table_info">
            <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">Nome</th>
                          <th scope="col">CPF</th>
                          <th scope="col">E-mail</th>
                          <th scope="col">telefone</th>
                          <th scope="col">endereço</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                        <?php while($dado = $consulta->fetch_array()){ ?>
                        <td><?php echo $dado["patient_name"]; ?></td> 
                          <td><?php echo $dado["patient_cpf"]; ?></td>
                          <td><?php echo $dado["patient_email"]; ?></td>
                          <td><?php echo $dado["patient_phone"]; ?></td>
                          <td><?php echo $dado["patient_address"]; ?></td>
                          </tr>
                        <?php }?>
                      </tbody>
              </table>
            </div>
          </section>

index css.

#view_patient
{
    width: 45em;
    margin: 0 auto;
}

#table_info
{
    display: block;
    float: left;
}
#print_boneco
{
    display: block;
    float: right;   
}

Answer 1

One of the options for this is putting flex in the container father #view_patient and flex-direction:row-reverse image to the right of the table

#view_patient {
    width: 45em;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;
}

#table_info {
    /* display: block; */
    /* float: left; */
}

#print_boneco {
    /* display: block; */
    /* float: right; */
}

<section id="view_patient">

    <div id="print_boneco">
        <h2 id="title_view_patient">
            Paciente
            <!-- <?php while($dado = $name->fetch_array()){ ?>
            <?php echo $dado["patient_name"]; ?>
            <?php }?> -->
        </h2>
        <!-- <img src="print-corpo-pain-free.jpg" alt="print-boneco" id="print_boneco_app" width="300" height="500" /> -->
        <img src="https://placecage.com/100/100">
    </div>

    <div id="table_info">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Nome</th>
                    <th scope="col">CPF</th>
                    <th scope="col">E-mail</th>
                    <th scope="col">telefone</th>
                    <th scope="col">endereço</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- <?php while($dado = $consulta->fetch_array()){ ?> -->
                    <td>php echo $dado["patient_name"]; ?></td>
                    <td>php echo $dado["patient_cpf"]; ?></td>
                    <td>php echo $dado["patient_email"]; ?></td>
                    <td>php echo $dado["patient_phone"]; ?></td>
                    <td>php echo $dado["patient_address"]; ?></td>
                </tr>
                <!-- <?php }?> -->
            </tbody>
        </table>
    </div>
</section>

Answer 2

I think just line up with margin-top is what I did.

  #view_patient
{
    width: 44em;
    margin: 0 auto;
   
}

#table_info
{
    display: block;
    float: left;
      margin-top: 65px;
}
#print_boneco
{
    display: block;
    float: right;   
}

#table_info td, #table_info th {
  border: 1px solid #ddd;
  padding: 8px;
}

#table_info tr:nth-child(even){background-color: #f2f2f2;}

#table_info tr:hover {background-color: #ddd;}

#table_info th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
  

<section id="view_patient">

  <div id="print_boneco">
        <h2 id="title_view_patient">
          Paciente 
        
        </h2>
        <img src="https://i.gifer.com/fetch/w300-preview/c6/c6fe15a3ab951824f03455cdb7f51cd9.gif" alt="print-boneco" id="print_boneco_app" width="300" height="500" />
  </div>

  <div id="table_info">
    <table class="table">
              <thead>
                <tr>
                  <th scope="col">Nome</th>
                  <th scope="col">CPF</th>
                  <th scope="col">E-mail</th>
                  <th scope="col">telefone</th>
                  <th scope="col">endereço</th>
                </tr>
              </thead>
              <tbody>
                <tr>
            
                <td>Nome</td> 
                  <td>CPF</td>
                  <td>Email</td>
                  <td>Phone</td>
                  <td>Adress</td>
                </tr>
                <td>Nome</td> 
                  <td>CPF</td>
                  <td>Email</td>
                  <td>Phone</td>
                  <td>Adress</td>
                </tr>
                <td>Nome</td> 
                  <td>CPF</td>
                  <td>Email</td>
                  <td>Phone</td>
                  <td>Adress</td>
                </tr>
                <td>Nome</td> 
                  <td>CPF</td>
                  <td>Email</td>
                  <td>Phone</td>
                  <td>Adress</td>
                </tr>
               <td>Nome</td> 
                  <td>CPF</td>
                  <td>Email</td>
                  <td>Phone</td>
                  <td>Adress</td>
                </tr>
               
              </tbody>
      </table>
    </div>
  </section>