メニュー開いても検索ボックス部分が下にずれない

前提・実現したいこと

TAGボタンを押すとメニューが開くが下の検索ボックスの下に隠れてしまいます。
実現したいのはTAGボタンを押すと開いたメニューの分、検索ボックスの部分が下がるようにしたいです。
ちなみにDEVツールで検証しているときにPCサイズでは思った通りの動き（検索ボックスが下にずれてくれる
）になりますが、スマホサイズで検証したときに発生します。

TAGボタンクリックしたときにメニューが開くので赤い線で書いたように検索ボックスを下に
ずらしたいです。

該当のソースコード

<section class="search-area">
      <div class="inner">
    <div class="search">
      <div class="catetag">
        <ul>
          <li class="blog-icon"><a href="https://〇〇/works">ALL</a></li>
          <li class="blog-icon"><a href="https://〇〇/group/web">WEB</a></li>
          <li class="blog-icon"><a href="https://〇〇/group/dtp">DTP</a></li>
          <li class="blog-icon"><a href="https://〇〇/group/pr">PR</a></li>
          <li class="blog-icon"><a href="https://〇〇/group/logo">LOGO</a></li>
          <li class="blog-icon"><a href="https://〇〇/group/movie">MOVIE</a></li>
          <li class="blog-icon"><a href="https://〇〇/group/other">OTHER</a></li>
          <li class="blog-icon2">
          <div class="select-box">
            <div class="menu">
              <!-- 折り畳み展開ポインタ -->
              <div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';" class="menu-box">
              <a style="cursor:pointer;">TAG<img src="https://〇〇/img/icon.png"></a>
              </div>
              <!--// 折り畳み展開ポインタ -->

              <!-- 折り畳まれ部分 -->
              <div id="open" style="display:none;clear:both;">
              <div class="open-box">
              <!--ここの部分が折りたたまれる、展開される部分-->
              <div class="open-inner">
              <ul>
              <li><a href='https://〇〇/division/a4-2'>A4</a>（5件）</li><li><a href='https://〇〇/division/sochan'>sochan</a>（1件）</li><li><a href='https://〇〇/division/sunhome'>サンホーム</a>（1件）</li><li><a href='https://〇〇/division/booklet'>冊子</a>（1件）</li><li><a href='https://〇〇/division/medical'>医療</a>（6件）</li>              </ul>
            </div><!--open-inner-->
              </div><!--open-box-->
              </div><!--open-->
              <!--// 折り畳まれ部分 -->
              </div><!--menu-->
          </div><!--select-box-->
          </li>
        </ul>
      </div><!--catetag-->
      <!--<div class="tagindex">
      </div>tagindex-->
      <div class="search-box">
      <form id='feas-searchform-1' action='https://〇〇/' method='get' >
<input type='text' name='s_keyword_0' id='feas_1_0'  placeholder="フリーワード検索" value='' /><script>jQuery("#feas_1_0").focus( function() { jQuery(this).attr("placeholder",""); }).blur( function() {
    jQuery(this).attr("placeholder", "フリーワード検索"); });</script>
<input type='submit' name='searchbutton' id='feas-submit-button-1' class='feas-submit-button' value='　　' />

<input type='hidden' name='csp' value='search_add' />
<input type='hidden' name='feadvns_max_line_1' value='1' />
<input type='hidden' name='fe_form_no' value='1' />
</form>
      </div><!--search-box-->
    </div>
</section>

css
/*----------------------
search
-------------------------*/
.search-area .inner{
  width: 626px;
  max-width: 100%;
  margin: 0 auto;
}
.form-text{
  font-size: 1.4rem;
  padding: 10.130px;
  width: 191px;
}

.catetag {
  width: 90%;
  margin: 0 auto;
}

.catetag ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* padding-top: 3%; */
  list-style-type: none;
}

.catetag ul li a {
  text-decoration: none;
  /* color: #fff; */
}

.form-text {
  width: 626px;
}

section.search-area {
  padding-top: 12.7%;
  background-color: #EDEDEA;
  padding-bottom: 12.7%;
}

.search-box {
  margin-top: 4%;
  width: 90%;
}

.form-box {
  display: flex;
  border: 2px solid lightgrey;
  width: 90%;
  margin: 0 auto;
  margin: 4.8% auto 0 auto;
}

.form-input {
  border: none;
  width: 100%;
  padding: 4%;
}

.form-button {
  background-color: white;
  border: none;
  padding: 4%;
}

ul li.blog-icon {
  width: 22%;
  color: #fff;
  background-color:#434241;
  text-align: center;
  /* padding: 1% 0;*/
  margin-top: 3%;
  height: 20px;
  line-height: 20px;
  display: inline-block;
}


ul li.blog-icon2 {
  width: 22%;
  color: #000;
  text-align: center;
  /* padding: 1% 0;*/
  margin-top: 3%;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  position: relative;
}

/*----------------------
TAG検索
-------------------------*/
.menu {
  width: 100%;
}

div#open {
  margin-top: 3%;
}

.open-box {
  margin-left: -313%;
  width: 250px;
}

.menu-box {
  border: 1px solid #000;
  padding: 3%;
  box-sizing: border-box;
  height: 20px;
}

.catetag .menu ul li a {
  color: #000;
}

/*----------------------
検索用プラグインのフォームスタイル
-------------------------*/
form#feas-searchform-1,
form#feas-searchform-0 {
  position: relative;
}

input#feas_1_0,
input#feas_0_0 {
  width: 100%;
  height: 44px;
  padding-left: 8%;
}

input#feas-submit-button-1,
input#feas-submit-button-0 {
  position: absolute;
  left: 4%;
  top: 25%;
  background: url(./_assets/img/serch-icon.png) no-repeat;
  border: none;
}

input#feas_1_0::placeholder,
input#feas_0_0::placeholder {
  padding-left: 11%;
}