I have 3 div elements, each with a width of 4. I want to align them all in a row but I am also using a toggle button to show these divs because by default their display is set to none. When the user clicks the toggle button, the divs will be shown to them. The issue I am facing is that the divs are showing up vertically in three rows instead of horizontally in a single row.
<div class="col-lg-4">
<div class="custom-control custom-switch" style="margin-left:25px">
@Html.CheckBox("Select Raw Targets", new { @class = "custom-control-input", id = "rawTargetSelection" })
<label class="custom-control-label" for="rawTargetSelection">Select Raw Targets</label>
</div>
</div>
<!-- Raw Target Tags Values Tabs Starts Here -->
<div class="row" id="Real_Tag_Targets" style="display:none">
<div class="col-md-4">
<div class="form-group">
<label>Select Real Tag Targets</label>
@Html.DropDownList("Raw Tag Targets", (IEnumerable<SelectListItem>)ViewBag.rawTagTargetValue, new { @class = "form-control add_item", @multiple = true, id = "Raw_Tag_Target_List" })
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Select Real Tag Min Targets</label>
@Html.DropDownList("Raw Tag Min Targets", (IEnumerable<SelectListItem>)ViewBag.rawTagTargetMin, new { @class = "form-control add_item", @multiple = true, id = "Raw_Tag_Min_Target_List" })
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Select Real Tag Max Targets</label>
@Html.DropDownList("Raw Tag Max Targets", (IEnumerable<SelectListItem>)ViewBag.rawTagTargetMax, new { @class = "form-control add_item", @multiple = true, id = "Raw_Tag_Max_Target_List" })
</div>
</div>
</div>
$("#rawTargetSelection").change(function () {
var x = document.getElementById("Real_Tag_Targets");
if (x.style.display === "none") {
x.style.display = "block";
}
else
{
x.style.display = "none";
}
});