Search code examples
cssformscss-floatstylingborder-box

How to align two form fields on the same row in html page using css?

I have this html text

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="glossary-form"></div>

<div class="form-group" style="display:inline-block; width:48%;padding-right: 5%;">
  <label for="glossary_entry_input_1">Lemma IT</label>
  <input type="text" class="form-control" id="glossary_entry_input_1" placeholder="">              
</div>

<div class="form-group" style="display:inline-block; width:48%; padding-left: 5%;">
		<label for="glossary_entry_input_2">Lemma CH</label>
		<input type="text" class="form-control" id="glossary_entry_input_2" placeholder="">              
</div>

<div class="form-group">
                    <label for="glossary_entry_input_3">Acronimo IT</label>
                    <small id="inputHelp" class="form-text text-muted">Inserire una sigla (se esiste) del Lemma. Nel caso in cui il lemma sia una grandezza fisica, inserire la lettera o il simbolo che la identifica.</small>
                    <input type="text" class="form-control" id="glossary_entry_input_3" placeholder="">              
            </div>  

</div>

generating the following form fields, aligned on one line, as you see

enter image description here

and I want to display them symmetrically to the vertical axys of my html page, by moving the second one to the right, as you see

enter image description here

So that the left margin of the "Lemma CH" box is aligned with the one of "Acronimo IT" box. How do I have to change my code to obtain the result shown in the second image?

Solution

  • Float right is not a right solution. try this.

    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="glossary-form"></div>
<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <label for="glossary_entry_input_1">Lemma IT</label>
      <input type="text" class="form-control" id="glossary_entry_input_1" placeholder="">
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <label for="glossary_entry_input_2">Lemma CH</label>
      <input type="text" class="form-control" id="glossary_entry_input_2" placeholder="">
    </div>
  </div>

</div>
<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <label for="glossary_entry_input_3">Acronimo IT</label>
      <small id="inputHelp" class="form-text text-muted">Inserire una sigla (se esiste) del Lemma. Nel caso in cui il
        lemma sia una grandezza fisica, inserire la lettera o il simbolo che la identifica.</small>
      <input type="text" class="form-control" id="glossary_entry_input_3" placeholder="">
    </div>

  </div>
</div>
</div>