how to arrange two divs side by side : <div id="quarterlistpanel" style="display:None; " >
       <apex:selectList id="QuarterSelList" size="1"  title="List of Quartersin year" style=" padding: 2px 4px; margin: 4px 2px;" >
                <apex:selectOption itemvalue="Quarters" itemLabel="Select a Quarter" />
                <apex:selectOption itemvalue="Q1" itemLabel="Quarter 1"/>
                     
            </apex:selectList>
       </div>
       <div id="buttonpanel" style="display:None; float:left">
            <apex:commandButton action="{!selectQuarter}" value="Go!"  status="actStatusId2"   reRender="pgBlckId,panelrender,panelrender1,panelrender14,panelrender15,panelrender24,panelrender23,panelrender12,panelrender13,panelrender2,panelrender21,panelrender22"  id="button2"/>               
        
           <apex:actionStatus id="actStatusId2" title="This is the status for loading image">
                    <apex:facet name="start" >
                     <img src="/img/loading.gif" width="25" height="25" align="bottom" title="Loading"/>
                      <h3> Loading..</h3>           
                    </apex:facet>
            </apex:actionStatus>
        </div>

I want to display these two div tags side by side.please let me know how can i achieve this.