Как разместить блок в блоке?

@import "nulstyle.scss";
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,400,500&display=swap');

.wrapper {
    position: absolute;
   right: 0;
   bottom: 0;
}

.main-block {
    height: 45.40vh;
    width: 20.06vw;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 .37037vh 2.96296vh .27778vh rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2.65vh);
    border-radius: 2.65vh;
    margin-bottom: 5.30vh;
    margin-right: 5.30vh;
}

.block-rotation {
    
}

.block-rotation__text {
    padding-top: 2.91vh;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 2.65vh;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    text-shadow: 0vh 0.39vh 0.66vh rgba(0, 0, 0, 0.4);
}

.block-rotation__blockforscroll {
    margin-right: 1.59vh;
    margin-left: 1.59vh;
    margin-top: 1.193vh;
    height: 3.85vh;
    width: 18.32vw;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0px 4.43649px 4.43649px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.material-symbols-outlined {
    color: #FFFFFF;
    cursor: pointer;
}

.block-rotation__grayblock {
    height: 3.18vh;
    width: 14.64vw;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    cursor: pointer;
}

.block-rotation__scroll {
    height: 3.18vh;
    width: 5.35vw;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 10px;
}

.block-rotation__number {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
    padding-top: 0.59vh;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
 <div class="wrapper">
      <div class="main-block">
         <div class="block-rotation">
            <div class="block-rotation__text">Поворот</div>
            <div class="block-rotation__blockforscroll">
               <span class="material-symbols-outlined">chevron_left</span>
               <input class="block-rotation__grayblock" min="0" max="360">
                  <div class="block-rotation__scroll"></div>
               <span class="material-symbols-outlined">chevron_right</span>
            </div>
            <div class="block-rotation__number">360</div>
         </div>  
      </div>
   </div>