Как слайд-левый поплавок div внутри родительского див и сделать правильный див шириной 100%, когда осталось div является hiiden

---

Привет
у меня есть 2 div внутри главного div.

с настройками как :

<div>---main container
  <div>---display:none for Search panel on page load width:0
  </div>

  <div>----main content holder on page load width:100%
  </div>
</div>

Я хочу, чтобы отобразить :как заблокировать кнопку нажмите с раздвижными экране.
Также изменяется ширина основного содержимого div.

Кто нибудь пожалуйста помогите

Что я уже пробовал:

.page{
      margin:0;
      width:100%; 
      height:100vh;  
 }
.page .maincontent{
      float:right;
      width:100%;
      
      
  }
  .page .pagesidebar
 {
    display:none;
    float:left;
    width:25%;
    overflow:hidden;
    height:100%;
 	background-color:#a4a4a4;
     border:1px solid black;
 	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     border-radius: 5px;
     transition: .6s ease opacity,.6s ease transform;
   }

---