Как исправить строку меню и контейнер в CSS при сворачивании страницы

Question

Посмотрите на картинку, я не знаю, в чем реальная проблема.

Панель поиска с кнопкой и полем с текстом «ПРОФИЛЬ» вызывает у меня проблему

.profile{
width: 300px;
height: 300px;
background-color: white;
border: 1px solid lightgrey;
border-radius: 5px; 
position: absolute;
right: 50px;
top: 80px;
}
.srch{
width: 500px;
height: 30px;    
border-radius: 2px;
border: 1px solid white;
margin-left: 150px;
padding-left: 8px;
}
.sub{
background: none;
border: 2px solid red;
border-radius: 2px;
color:white;
font-weight: bold;
font-size: 14px;
width: 100px;
height: 35px;    
}

Answer 1

Учитывая, что CSS используется в HTML, почему бы вам не попробовать использовать Bootstrap?Это действительно полезно, оно может изменить размер и переместить ваш элемент должным образом при изменении размера окна.И это делает это ответно.Вы можете использовать его классы (как), чтобы сделать это.Здесь, смотрите документацию сетки макета, она должна работать для вашей проблемы

https://getbootstrap.com/docs/4.3/layout/grid/

Answer 2

Я не совсем понял,

код ниже удерживает строку поиска с кнопкой поиска.если вы хотите разместить панель поиска над столбцом профиля. Убедитесь, что она находится внутри столбца. И удалите позицию: absolute;собственность и ее право;и верх :;также.используйте float: правильно;

.srch{
      position:relative;
     }

 .sub{
     position:absolute;
     top:0;
     right:0;
    }

есть вопросы, пожалуйста, не стесняйтесь спрашивать.

Answer 3

Использование:

vertical-align: top;

Для текста