Best way to place two html sections side by side-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

You can search for a framework like Bootstrap, they have build in classes to make rows, columns and custom layouts for your HTML

CodePudding user response：

This is a perfect use of CSS Flexbox

Here is a full guide on how to use it so you aren't locked into one implementation:

CSS Tricks

CodePudding user response：

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>