Set a div under another - php

Question

I am having a big issue currently with my website : http://www.onetechsearch.com/recipes/?search=&images=1&from=&to=&cat=all.
What I am trying to do is to have my search bar, and under that to have my "extra search", and no matter how I try the extra search won't go under the normal search.
And I would like to make the extra fade-in and out when a button next to search is pressed, any clue how I can do that?
<style type="text/css">
#picture-side {
display: inline-block;
float:left;
z-index: 8;
text-align:center;
}
#picture-side1 {
display: inline-block;
float:left;
z-index: 9;
text-align:center;
}
.width-container {
max-width:1180px;
margin:0 auto;
position:relative;
}
#topbar {
background:#f2f2f2;
padding:15px 0 0 0;
min-height:70px;
position:fixed;
top:0;
z-index:998;
box-sizing: border-box;
width:100%;
box-shadow: 0 2px 10px #000;
}
#search input#sfield{
margin:0;
width:54%;
padding:0 10px;
font:normal 16px Arial, sans-serif;
border:none;
float:left;
border-radius:5px 0 0 5px;
box-shadow: 0 0 4px #444;
#picture-side2 {
display: inline-block;
float:left;
z-index: 10;
}
input[type="radio"]:checked+label{ border-bottom: 5px solid lime; }
.site-wrap {
display: none;
}
#picture {
visibility: hidden;
}
#picture2 {
visibility: hidden;
}
#video {
visibility: hidden;
}
</style>
<?php if(is_front_page() & 0){ ////////////////////ONLY ON FRONTPAGE///////////////////////?>
<ul id="side_cat" class="navigation">
<?php
global $client;
$categs = $client->getResult('*:*', "", 0, 1);
//$count = count($categs[0]['category_f']) > 20 ? 20 : count($categs[0]['category_f']);
$nCategs = $client->getResponse()->facet_counts->facet_queries;
$count = count((array)$nCategs);
foreach ($cat2 as $k => $v) {
$cat2[$k] = strtolower($v);
}
$categs_n = array();
$categs_v = array();
foreach ($nCategs as $k => $v)
{
$categs_v[] = $v;
$categs_n[] = $k;
}
$j = 0;
$newC = array();
for ($i= 0; $i < $count; $i++) {
/* foreach ($cat as $cat){ */
if (in_array($categs_n[$i], $cat2) && $j < 30 ) {
$j++;
$newC[] = ucfirst($categs_n[$i]); ?>
<?php }
}
foreach ($newC as $categ)
{ ?>
<li class="nav-item"><?php echo ucwords($categ); ?></li>
<?php
}
?>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger">
<label for="nav-trigger"></label>
<?php } else { ////////////////////OTHER PAGES///////////////////////?>
<?php }?>
<script src="jquery-1.8.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cat= ["C"];
$("#cat").select2({
data: cat
});
});
</script>
<div id="topbar">
<div class="width-container">
<h1><?php bloginfo('name'); ?></h1>
<div id="search">
<form action="<?php bloginfo('url');?>/recipes" method="GET" id="searchF">
<?php
$searched_term = get_query_var('recipe_search');
if (empty($searched_term)) {
$searched_term = isset($_GET["search"]) ? $_GET["search"] : "";
}
?>
<input id="sfield" type="text" name="search" placeholder="keywords" <?php if (!empty($searched_term)) {echo 'value="'.$searched_term.'"';} ?>>
<input type="submit" value="Search">
</div>
</div>
<div id="extra-search" div style="display:flex;justify-content:center;align-items:center;z-index:-9000" >
<div id="picture-side">
<input type="radio" name="images" value="1" id="picture"
<?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>><label for="picture">With Pictures</label>
</div>
<div id="picture-side1">
<input type="radio" name="images" value="0" id="picture2"
<?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>><label for="picture2">Without Pictures</label>
</div>
<div id="picture-side2">
<input type="radio" name="images" value="0" id="video"
<?php if(isset($_GET["video"]) && $_GET["video"]=='1'){ echo 'checked';} ?>><label for="video">With video</label>
</div>
<div id="time-side">
<!--<small>Published time</small>-->
<input type="text" id="from-side" name="from" placeholder="Start date"
</div>
<select id="cat" name="cat">
<option value="all" selected>All categories</option>
<option value="HI">Hawaii</option>
<option value="C">Hawaji</option>
</select>
</div>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
console.log(1);
jQuery("#searchF").submit( function(event) {
console.log($("#cat :selected").val());
var bAction = "<?php bloginfo('url');?>";
bAction = bAction + "/recipes/category/" + $("#cat :selected").val();
jQuery("#searchF").find('#cat').attr('disabled', true);
jQuery(this).attr('action', bAction);
});
});
</script>

Answer 1

Just remove the float: left; on #search in the CSS.

Answer 2

Changes to make it work:
#topbar h1 - set width:
width: 100%;
#extra-search - set only those styles:
position: relative;
float: left;
max-width: 1180px;
margin: 0 auto;
if you want to take advantage of display:flex - just put another div inside of extra-search.