Adaptive layout(@media), is it possible to use not the screen width, but the dimensions of the parent element?

Question

css

Good day. I need to make a responsive form, natively without plugins.
I wanted to make columns similar to what is in bootstrap.

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

But the form is a separate element, with its own, much smaller size. All elements should resize relative to it and not the size of the entire window. Is it possible to make media relative to the form tag and not screen

Answer 1

It is possible through pseudo-class icon

Answer 2

<button>
    <span>text</span>
    <i class="icon-right"/>
</button>

Answer 3

<div class="btn>
<div class="btnContainer">
<div class="btnText"> Send Message </div> //текст кнопки
<div class="btnIco"> -> </div> //иконка кнопки, можно в виде знака, можно и в виде картинки
</div>
</div>

.btn {
width: 150px;  //задаешь свое значение длины
height: 50px;  //задаешь свое значение
padding: 10px;  //задаешь внутренний отступ для блока с классом btn
border-radius: 50%;   //задаешь окружность бордера
background-color: #fff;  //задаешь значение цвета фона кнопки
}
.btnContainer {
width: 100%;  //длина блока с классом btnContainer полностью заполняет блок btn
height: 100%;   //высота блока с классом btnContainer полностью заполняет блок btn
margin: 0 auto;  //выравниваем блок btnContainer по середине
text-align: center;  //выравниваем текст внутри блока btn container
}
.btnText {
width: 80%;
height: 100%;
float: left;  //стыковываем к левому краю
//далее оформляешь как хочешь
}

.btnIco {
width: 20%;
height: 100%;
float: right;  //стыковываем к правому краю
//далее оформляешь как хочешь
}