spacing HTML forms

Question

i am fairly new to coding in terms of webpage structure. i have two forms here that list some items. in its current state it the forms go down the page in a long line what. i would like to have the forms be next to each other.

<form name="meats">
<h2>Select one Protien</h2>
<p><input type="checkbox" name="meat" value="grilledchicken" /> 
Grilled Chicken: <br /><img src="grillchicken.jpg">
</p>

<p><input type="checkbox" name="meat" value="salmon" />Seared Salmon: <br /><img src="ssalmon.jpg">
</p>

<p><input type="checkbox" name="meat" value="lamb" />
Roast Lamb: <br /><img src="lamb.jpg">
</p>

<p><input type="checkbox" name="meat" value="Steak" />
Grilled Steak: <br /><img src="steak.jpg">
</p>

<p><input type="checkbox" name="meat" value="tofu" />
Marinated Tofu: <br /><img src="tofu.jpg">
</p>

i tested using style="margin-right:5em" but it only shifted the form over to the right and did not bring it up next to the other form.

<form style="margin-left:20em" name="vegetables">
<h2>Select your vegetables</h2>

<p><input type="checkbox" name="veg" value="broco" />
Broccoli: <br /><img src="brocc.jpg">
</p>

<p><input type="checkbox" name="veg" value="Aspar" />
Asparagus: <br /><img src="aspar.jpg">
</p>

<p><input type="checkbox" name="veg" value="sprouts" />
Brussel Sprouts: <br /><img src="sprouts.jpg">
</p>

<p><input type="checkbox" name="veg" value="redBell" />
Red Bell Pepper: <br /><img src="redbell.jpg">
</p>

<p><input type="checkbox" name="veg" value="eggP" />
Eggplant:  <br /><img src="eggp.jpg">
</p>

Answer 1

wrap each form in a div than float them and give the width of 50%;

favorite i am fairly new to coding in terms of webpage structure. i have two forms here that list some items. in its current state it the forms go down the page in a long line what. i would like to have the forms be next to each other.

<div style="width:48%;float:left;margin-right:2%">
<form name="meats">
<h2>Select one Protien</h2>
<p><input type="checkbox" name="meat" value="grilledchicken" /> 
Grilled Chicken: <br /><img src="grillchicken.jpg">
</p>

<p><input type="checkbox" name="meat" value="salmon" />Seared Salmon: <br /><img src="ssalmon.jpg">
</p>

<p><input type="checkbox" name="meat" value="lamb" />
Roast Lamb: <br /><img src="lamb.jpg">
</p>

<p><input type="checkbox" name="meat" value="Steak" />
Grilled Steak: <br /><img src="steak.jpg">
</p>

<p><input type="checkbox" name="meat" value="tofu" />
Marinated Tofu: <br /><img src="tofu.jpg">
</p>

</form>
</div>


<div style="width:48%;float:left;">
<form style="margin-left:20em" name="vegetables">
<h2>Select your vegetables</h2>

<p><input type="checkbox" name="veg" value="broco" />
Broccoli: <br /><img src="brocc.jpg">
</p>

<p><input type="checkbox" name="veg" value="Aspar" />
Asparagus: <br /><img src="aspar.jpg">
</p>

<p><input type="checkbox" name="veg" value="sprouts" />
Brussel Sprouts: <br /><img src="sprouts.jpg">
</p>

<p><input type="checkbox" name="veg" value="redBell" />
Red Bell Pepper: <br /><img src="redbell.jpg">
</p>

<p><input type="checkbox" name="veg" value="eggP" />
Eggplant:  <br /><img src="eggp.jpg">
</p>

</form>

</div>

Answer 2

Hi check if it's ok...

 <div style="width:50%;float:left;"><form name="meats"> <h2>Select one Protien</h2> <p><input type="checkbox" name="meat" value="grilledchicken" /> Grilled Chicken: <br /><img src="grillchicken.jpg"> </p> <p><input type="checkbox" name="meat" value="salmon" />Seared Salmon: <br /><img src="ssalmon.jpg"> </p> <p><input type="checkbox" name="meat" value="lamb" /> Roast Lamb: <br /><img src="lamb.jpg"> </p> <p><input type="checkbox" name="meat" value="Steak" /> Grilled Steak: <br /><img src="steak.jpg"> </p> <p><input type="checkbox" name="meat" value="tofu" /> Marinated Tofu: <br /><img src="tofu.jpg"> </p> </form> </div> <div style="width:50%;float:left;" > <form style="margin-left:20em" name="vegetables"> <h2>Select your vegetables</h2> <p><input type="checkbox" name="veg" value="broco" /> Broccoli: <br /><img src="brocc.jpg"> </p> <p><input type="checkbox" name="veg" value="Aspar" /> Asparagus: <br /><img src="aspar.jpg"> </p> <p><input type="checkbox" name="veg" value="sprouts" /> Brussel Sprouts: <br /><img src="sprouts.jpg"> </p> <p><input type="checkbox" name="veg" value="redBell" /> Red Bell Pepper: <br /><img src="redbell.jpg"> </p> <p><input type="checkbox" name="veg" value="eggP" /> Eggplant: <br /><img src="eggp.jpg"> </p> </form> </div> 

cheers!!