Align tables to the right of other tables

Question

• I have 2 tables with id="BFCategories" and "BMICategories".

• I have other 2 tables with id="BFTable" and "BMITable"

• BFCategories is below BFTable and BMICategories is below BMITable.

How can I move BFCategories and BMICategories so they can be placed to the right side of BFTable and BMITable?, like in this picture:

This is the HTML of my view, I'm using asp.net MVC5 :

---

<h1>Calculate</h1>
<hr />
<h2>BMI</h2>

<form>



    <table id="BMITable">

        <tr>
            <td align="right"><b>Weight:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Weight" class="form-control" id="Weight" /></div><b>kg</b></td>
        </tr>
        <tr>
            <td align="right"><b>Height:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Height" class="form-control" id="Height" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>BMI:</b></td>
            <td align="left"><div class="col-xs-4"><input type="text" name="BMI" class="form-control" id="BMIBox" /></div></td>
        </tr>
    </table>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" value="Calculate" class="btn btn-default" id="CalculateBMI" />

        </div>

    </div>

    <table id="BMICategories">
        <p>
            <b>Underweight</b> = &lt;18.5<br>
            <b>Normal weight</b> = 18.5&ndash;24.9 <br>
            <b>Overweight</b> = 25&ndash;29.9 <br>
            <b>Obesity</b> = BMI of 30 or greater
        </p>
    </table>


</form>

<hr />
<h2>BF% (aproximated)</h2>
<p>(All the measurements must be taken at the narrowest point)</p>

<form>
    <table id="BFTable">
        <tr>
            <td><b>Male</b></td>
            <td><input type="radio" name="gender" id="male" /><b>      Female</b><input type="radio" name="gender" id="female" /></td>
        </tr>

        <tr>
            <td align="right"><b>Height:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Height" class="form-control" id="height2" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>Waist:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Waist" class="form-control" id="waist" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>Hip:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Hip" class="form-control" id="hip" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>Neck:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Neck" class="form-control" id="neck" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>BF%:</b></td>
            <td align="left"><div class="col-xs-4"><input type="text" name="BF%" class="form-control" id="bf" /></div><b>%</b></td>
        </tr>
    </table>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" value="Calculate" class="btn btn-default" id="CalculateBF">
        </div>
    </div>

    <table class="cinfoT" width="320" align="left" id="BFCategories">
        <tr><td class="cinfoHd"><b>Description</b></td><td class="cinfoHdL"><b>Women</b></td><td class="cinfoHdL"><b>Men</b></td></tr>
        <tr><td><b>Recommended amount</b></td><td class="cinfoBodL">20-25%</td><td class="cinfoBodL">8-14%</td></tr>
        <tr><td><b>Average</b></td><td class="cinfoBodL">22-25%</td><td class="cinfoBodL">15-19%</td></tr>
        <tr><td><b>Obese</b></td><td class="cinfoBodL">30+%</td><td class="cinfoBodL">25+%</td></tr>
    </table>

</form>

Answer 1

Hey For now you can do the way i did but Take a look on bootstrap document because you have added the bootstrap code but you have no idea and this will help you alot in coming days to make a your design better.

table {
  width: 50%;
  float: left;
}

<h1>Calculate</h1>
    <hr />
    <h2>BMI</h2>

    <form>


        <table id="BMITable">

            <tr>
                <td align="right"><b>Weight:</b></td>
                <td align="left"><input type="text" name="Weight" class="form-control" id="Weight" /><b>kg</b></td>
            </tr>
            <tr>
                <td align="right"><b>Height:</b></td>
                <td align="left"><input type="text" name="Height" class="form-control" id="Height" /><b>cm</b></td>
            </tr>
            <tr>
                <td align="right"><b>BMI:</b></td>
                <td align="left"><input type="text" name="BMI" class="form-control" id="BMIBox" /></td>
            </tr>
            <tr>
            <td colspan='2'>
            <input type="button" value="Calculate" class="btn btn-default" id="CalculateBMI" /></td>
            </tr>
        </table>
          

        <table id="BMICategories">
            <p>
                <b>Underweight</b> = &lt;18.5<br>
                <b>Normal weight</b> = 18.5&ndash;24.9 <br>
                <b>Overweight</b> = 25&ndash;29.9 <br>
                <b>Obesity</b> = BMI of 30 or greater
            </p>
        </table>

    </form>


    <hr />
    <h2>BF% (aproximated)</h2>
    <p>(All the measurements must be taken at the narrowest point)</p>

    <form>
        <table id="BFTable">
            <tr>
                <td><b>Male</b></td>
                <td><input type="radio" name="gender" id="male" /><b>      Female</b><input type="radio" name="gender" id="female" /></td>
            </tr>

            <tr>
                <td align="right"><b>Height:</b></td>
                <td align="left"><input type="text" name="Height" class="form-control" id="height2" /><b>cm</b></td>
            </tr>
            <tr>
                <td align="right"><b>Waist:</b></td>
                <td align="left"><input type="text" name="Waist" class="form-control" id="waist" /><b>cm</b></td>
            </tr>
            <tr>
                <td align="right"><b>Hip:</b></td>
                <td align="left"><input type="text" name="Hip" class="form-control" id="hip" /><b>cm</b></td>
            </tr>
            <tr>
                <td align="right"><b>Neck:</b></td>
                <td align="left"><input type="text" name="Neck" class="form-control" id="neck" /><b>cm</b></td>
            </tr>
            <tr>
                <td align="right"><b>BF%:</b></td>
                <td align="left"><input type="text" name="BF%" class="form-control" id="bf" /><b>%</b></td>
            </tr>
            <tr>
            <td colspan='2'>
                    <input type="button" value="Calculate" class="btn btn-default" id="CalculateBF"></td>
                    </tr>
        </table>
        

        <table class="cinfoT" width="320" align="left" id="BFCategories">
            <tr><td class="cinfoHd"><b>Description</b></td><td class="cinfoHdL"><b>Women</b></td><td class="cinfoHdL"><b>Men</b></td></tr>
            <tr><td><b>Recommended amount</b></td><td class="cinfoBodL">20-25%</td><td class="cinfoBodL">8-14%</td></tr>
            <tr><td><b>Average</b></td><td class="cinfoBodL">22-25%</td><td class="cinfoBodL">15-19%</td></tr>
            <tr><td><b>Obese</b></td><td class="cinfoBodL">30+%</td><td class="cinfoBodL">25+%</td></tr>
        </table>

    </form>