Best way to place two html sections side by side

Question

Summarize the problem

The purpose of this question is to find the best way to display two sections of html side by side. Ideally, I'd like to be able to break the UI up like so

Rather than the current setup

Describe what you’ve tried

I've tried modifying the html on my own, but I would like to get advice from a more experienced develop on how to do this.

Show some code

<center>
        <div id="boxstyle">
          <h3 id="h3style">Section 5.2 Word Matching Exercise</h3>

          <center>
            <div class="inputBoxes">
              User Input:
              <table id="tablestyle">
                <td>
                  <input id="el1" type="text" value="">
                </td>
                <td>
                  <input id="el2" type="text" value="">
                </td>
                <td>
                  <input id="el3" type="text" value="">
                </td>
                <td>
                  <input id="el4" type="text" value="">
                </td>
                <td>
                  <input id="el5" type="text" value="">
                </td>
              </table>
            </div>
          </center>
          <center>
            <div class="inputBoxes">
              Result in HTML:
              <table id="tablestyle">
                <td>
                  <input id="dl1" type="text" value="">
                </td>
                <td>
                  <input id="dl2" type="text" value="">
                </td>
                <td>
                  <input id="dl3" type="text" value="">
                </td>
                <td>
                  <input id="dl4" type="text" value="">
                </td>
                <td>
                  <input id="dl5" type="text" value="">
                </td>
              </table>
              <span style="padding: 3px">
                <button id ="one" class="button" type="button" onClick="process_input()">generate html</button>
              </span>
            </div>
          </center>
          <center>

Note that the `` tag has been obsolete for many years. Do not use it. — Rob, Sep 22 '21 at 13:20
Stacking elements one after the other is the typical HTML behaviour. To modify it, you must use styling. You can copy&paste an answer from here, but I think you are missing the basic of HTML programming. I would advise you to read some tutorial like this one https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout. It will save you time in the future! — pasine, Sep 22 '21 at 13:21

score 1 · Accepted Answer · answered Sep 22 '21 at 13:17

You can try to learn CSS Flexbox. For example:

.row {
  display: flex;
}

.column {
  flex: 50%;
  text-align: center;
}

.column-1 {
  background-color: red;
}

.column-2 {
  background-color: blue;
}

<div class="row">
  <div class="column column-1">Column 1</div>
  <div class="column column-2">Colum 2</div>
</div>

score 1 · Answer 2 · answered Sep 22 '21 at 13:27

You can use flexbox for this.
The all the inputs are enclosed within inputBoxes where display:flex;. The center tag is not used anymore so justify-content: center; was used to align the flex boxes. Similiarly all the text was aligned to the center using text-align: center;

<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id = "boxstyle">
         <h3 id="h3style">Section 5.2 Word Matching Exercise</h3>
         User Input:
         <div class="inputBoxes">
              <div><input id="el1" type="text" value=""></div>
              <div><input id="el2" type="text" value=""></div>
              <div><input id="el3" type="text" value=""></div>
              <div><input id="el4" type="text" value=""></div>
              <div><input id="el5" type="text" value=""></div>
         </div>
        
          Result in HTML :
         <div class="inputBoxes">
              <div><input id="dl1" type="text" value=""></div>
              <div><input id="dl2" type="text" value=""></div>
              <div><input id="dl3" type="text" value=""></div>
              <div><input id="dl4" type="text" value=""></div>
              <div><input id="dl5" type="text" value=""></div>
         </div>
         <span style="padding: 3px">
                <button id ="one" class="button" type="button" onClick="process_input()">generate html</button>
         </span>
    </div>
</body>


<style>
body{ 
    text-align: center;
    }
.inputBoxes{
    display: flex;
    justify-content: center;
}

.inputBoxes div{
    margin-left: 2%;
}

</style>
</html>

Best way to place two html sections side by side

2 Answers2