Line two divs side by side inside a fieldset - html

Question

I am trying to place these two divs side by side with each other but no matter what attempt I make, even if it's worked on another page, I get a results that looks like this:
Here's the HTML (It's an MVC site so I'm using Razor):
<fieldset id="AgentTypeFields" style="width: 400px;" >
<legend>Producer Info</legend>
<div id="BasicsContainer" style="clear:both;">
<div id="BasicsLeft" style="float: left;">
<div class="M-editor-label" >
#Html.LabelFor(model => model.ReferenceNumberType)
</div>
<div class="M-editor-label">
#Html.LabelFor(model => model.FormattedReferenceNumber)
</div>
<div class="M-editor-label">
#Html.LabelFor(model => model.ProducerType)<span class="req">*</span>
</div>
<div class="M-editor-label">
#Html.LabelFor(model => model.EffectiveDate)<span class="req">*</span>
</div>
<div class="M-editor-label">
#Html.LabelFor(model => model.JIT)
#Html.CheckBoxFor(x => x.JIT)
</div>
<span id="ExternalRepId">
<div class="M-editor-label">
#Html.LabelFor(model => model.ExtRepID)
</div>
</span>
</div>
<div id="BasicsRight" style="float:right;">
<div class="M-editor-field" style="margin-right: 120px;" >
#Html.RadioButtonFor(model => model.ReferenceNumberType, "S") SSN
#Html.RadioButtonFor(model => model.ReferenceNumberType, "E") EIN
</div>
<div class="M-editor-field" id="refNumber" style="margin-right:138px;">
#if (ViewBag.FullSSN)
{
#Html.DisplayFor(model => model.FormattedReferenceNumber)
}
else
{
#Html.Raw("xxx-xx-")#Html.DisplayFor(model => model.displayLastFour)
}
</div>
<div class="M-editor-field" style="margin-right:82px;">
#Html.DropDownListFor(x => x.ProducerType, (SelectList)ViewBag.ProducerChoices, new { id = "drpProducerType" })
</div>
<div class="M-editor-field">
#Html.TextBoxFor(model => model.EffectiveDate, new { maxlength = 10 })
#Html.ValidationMessageFor(model => model.EffectiveDate)
</div>
<div class="M-editor-field">
#Html.LabelFor(model => model.HoldBool)
#Html.CheckBoxFor(x => x.HoldBool)
</div>
<span id="ExternalRepId">
<div class="M-editor-field">
#Html.TextBoxFor(model => model.ExtRepID, new { maxlength = 40 })
</div>
</span>
</div>
</div>
</fieldset>

Answer 1

You need to specify the width on your floating divs, preferably to 50%.
Another solution is to use html tables or flex boxes

Answer 2

Try setting Css display: inline-block; for child divs. one more issue is as width for your fieldset is 400px both divs cannot be fitted inside it. Try setting it to 100%
<fieldset id="AgentTypeFields" style="width: 100%;" >
<legend>Producer Info</legend>
<div id="BasicsContainer" style="clear:both;">
<div id="BasicsLeft" style="display:inline-block;">
....
....
</div>
<div id="BasicsRight" style="display:inline-block;">
....
....
</div>
</div>
</fieldset>
FIDDLE