display: flex;

   align-items: center;

 }

 .flex-between {

   display: flex;

   /* flex-grow: 1; */

   justify-content: space-between;

   align-items: center;

 .m-r3 {

   margin-right: 3rem;

 }

 .gap {

   gap: 1rem;

 }

   border: 0;

   border-radius: 5px;

   color: #fff;

 }

 .gr-btn {

   background: #13833b;

       <div class="wrap flex-between">

         <div class="search">

           <h2>횡단보도 조회</h2>

             <DongSelectList @setDongCd="setDongCd" ref="parent" :crslk_azHiddenCk=true :open_layers="this.$refs.open_layers"

             @siDoGunGuSelectF="siDoGunGuSelectF" @dongSelectF="dongSelectF" @nodeSelectF="nodeSelectF"></DongSelectList>

           </div>

           <hr>

           <h2 v-show="modal_crosswalUpdate==true">횡단보도 수정</h2>

 .search .box {

   padding: 1rem 2rem;

 }

 .search input[type="text"] {

   width: 9rem;

 }

 .btn_set {

   position: relative;

   border-bottom: 1px solid #e5e3e3;

 }

 .left {

   background: #fff;

 }

 .right {

   width: -webkit-fill-available;

 .modal button img {

   width: 25px;

 }

 </style>

     <div class="board-wrap">

       <div class="search-wrap">

         <div class="flex m-b mb-block">

             <label class="taa ta5">지역: </label>

             <dongSelectList

               @setDongCd="setDongCd"

             ></dongSelectList>

           </div>

         </div>

           <label class="taa">조회기간: </label>

           <input

             class="in1"

             v-model="crosswalkListSearch.endDate"

           />

           <div class="flex">

               <label class="taa taa2">상태 </label>

               <select name="" id="op">

                 <option value="">정상</option>

         </div>

         <div class="flex-between line">

           <div class="flex mb-block">

               <label class="taa">우회차선: </label>

               <select v-model="crosswalkListSearch.searchRightTurnType">

                 <option value="null" disabled>전체</option>

               </select>

             </div>

               <label class="taa">왕복차선: </label>

               <select v-model="crosswalkListSearch.searchRoundTripLane">

                 <option value="null" disabled>전체</option>

           </div>

           <div class="flex">

               <label class="m-r taa">장비: </label>

               <label>무단횡단</label>

               <input

     <div style="margin-left: 2rem;" class="m-b3">현황관제&nbsp;&#62;&nbsp;<em class="green2 lined">상황발생 정보 조회</em> </div>

     <div class="board-wrap">

       <div class="search-wrap">

           <div class="flex gap m-b date">

             <label>날짜를 선택해주세요.</label>

             <input type="date" name="" id="" />

       </ul>

     </div>

     <div class="board-wrap">

       <div class="search-wrap clear-fix">

         <div class="float-right flex gap5">

           <div class="flex gap m-mb">

 <style scoped>

 .mobile{display: none;}

 .wrap {

   margin: 100px auto;

 }

 .tab-wrap {

   margin-bottom: 30px;

 }

 <template>

   <div class="wrap">

     <div class="board-wrap">

       <div class="search-wrap clear-fix">

         <div class="float-right flex gap">

           <div class="flex gap date">

             <label>등록일자</label>

             <input

               type="date"

               value-format="yyyyMMdd"

               v-model="managerListSearch.startDate"

             />

             <span> ~ </span>

             <input

               type="date"

               value-format="yyyyMMdd"

               v-model="managerListSearch.endDate"

                   v-model="managerListSearch.searchText"

                   @keyup.enter="managerSelectList"

                 />

                   검색

                 </button>

           </div>

           :click="managerSelectList"

         />

         <div class="btn-wrap">

             등록

           </button>

         </div>

 .mobile{display: none;}

 .date{margin-right: 3rem;}

 .wrap {

   margin: 100px auto;

 }

 .search{width: 350px;}

 .search-wrap {

   margin-bottom: 30px;

   <div class="wrap">

     <div >

       <div class="search-wrap clear-fix">

         <div class=" flex-end gap">

           <select v-model="nodeListSearch.searchType">

             <option value="null">검색조건</option>

 }

 .wrap {

   margin: 100px auto;

 }

 .search-wrap {

   margin-bottom: 30px;

 }

 <template>

   <div class="wrap">

     <div class="tab-wrap">

       <ul>

         <li>

       </ul>

     </div>

     <div class="board-wrap">

       <div class="search-wrap clear-fix">

         <div class="float-left">

           <select v-model="userListSearch.authorFilter" @change="userSelectList">

 }

 .mobile{display: none;}

 .wrap {

   margin: 100px auto;

 }

 .tab-wrap {

   margin-bottom: 30px;

 }