Positioning of controls within DIV - css

Question

I have a set of controls that will show/hide when the user clicks a button. The controls consist of a grid, 2 labels, a dropdown, a text box and another button. I would like to position them as follows:
I have the grid positioned correctly but the dropdown and textbox controls are to the left but below the grid. The button is not centered.
How can I position the DIV with the controls to be positioned beside the grid and the button to display in the center but at the bottom of the main PANEL?
This is my makeup:
<asp:Button ID="btnShowMappingPanel" runat="server" Text="Update Value(s) in Multiple Mappings" Width="325px" />
<asp:Panel ID="pnlMultipleMappingControls" runat="server" Height="300px" Width="1000px" style="display:none;" BackColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
<div id="divMultiMapGrid" style="margin: 25px; width:45%">
<asp:GridView ID="msmgvMultiMappingSelection" runat="server" AllowPaging="True" PageSize="4" AllowSorting="True" AutoGenerateColumns="False" Caption="Select Multiple Mappings to Update"
CaptionAlign="Top" CssClass="grid" Visible="true">
<Columns>
<asp:TemplateField HeaderText="Select">
<EditItemTemplate>
<asp:CheckBox ID="msmgvCkBoxEditSelect" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="msmgvCkBoxSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mapping ID">
<ItemTemplate>
<asp:Label ID="msmgvLblMappingID" runat="server" Text='<%# Bind("EnrollmentMappingID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Schoology Course ID">
<ItemTemplate>
<asp:Label ID="msmgvLblSchoologyCourseID" runat="server" Text='<%# Bind("SchoologyCourseID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CE City Activity ID">
<ItemTemplate>
<asp:Label ID="msmgvLblCECityActivityID" runat="server" Text='<%# Bind("CECityActivityID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">
<div id="divMultiMapActiveCtrl" style="padding:10px">
<asp:Label ID="lblActive" runat="server" Text="Is Active: " CssClass="label"></asp:Label>
<asp:DropDownList ID="ddlActiveOptions" runat="server">
<asp:ListItem> </asp:ListItem>
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">
<asp:Label ID="lblMaxEnrollment" runat="server" Text="Maximum Enrollment: " CssClass="label"></asp:Label>
<asp:TextBox ID="txtBoxMapEnroll" runat="server" Width="25%"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtBoxMapEnroll" runat="server"
ErrorMessage="Enter only integers." ValidationGroup="multiMapEditMappingValidation" ValidationExpression="^\d+$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</div>
</div>
<div id="divMultiMapUpdateBtn">
<asp:Button ID="btnUpdateSelectedMappings" runat="server" Text="Update Selected Mappings" Width="200px" CausesValidation="true"
ValidationGroup="multiMapEditMappingValidation" OnClick="btnUpdateSelectedMappings_Click" />
</div>
</asp:Panel>
AS REQUESTED this is the jsfiddle
<panel>
<div id="divMultiMapGrid" style="margin: 25px; width:45%">Grid is here</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">Controls are here
<div id="divMultiMapActiveCtrl" style="padding:10px">Dropdown control</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">text box control</div>
</div>
<div id="divMultiMapUpdateBtn">Button</div>

Answer 1

First of all Don't use inline CSS. It will be very tough to manage later.
Now for your question:
#divMultiMapGrid {
margin: 25px;
width: 45%;
float: left;
}
#divMultiMapControls {
float: right;
width: 45%;
padding: 5px;
}
#divMultiMapActiveCtrl {
padding: 10px;
}
#divMultiMapMaxEnrollCtrl {
padding: 10px;
}
#divMultiMapUpdateBtn {
clear: both;
margin: auto;
width: 104px; // adjust width based on button
}
If you are still interested only in inline style, then
<panel>
<div id="divMultiMapGrid" style="margin: 25px; width:45%;float: left;">Grid is here</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">Controls are here
<div id="divMultiMapActiveCtrl" style="padding:10px">Dropdown control</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">text box control</div>
</div>
<div id="divMultiMapUpdateBtn" style=" clear: both; margin: auto; width: 104px;">Button</div>
</panel>