CSS-анимация и макет: как анимировать метку, чтобы (гибкий) макет настраивался? ⇐ CSS

[Anonymous]

У меня довольно простой макет поля формы...
Оно разделено на 2 столбца: метка слева и ввод справа

Код: Выделить всё

const toggle = () => {
const wrapperEl = document.querySelector(".wrapper");
if (wrapperEl) {
wrapperEl.classList.toggle("hidden");
}
};

Код: Выделить всё

.wrapper {
display: flex;
width: 100%;
overflow: hidden;

.col {
padding: 2px 4px;
transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
}
.col1 {
background-color: red;
flex-shrink: 0;

label {
display: flex;
align-items: center;
}
}
.col2 {
background-color: blue;
flex-grow: 1;
input {
width: 100%;
box-sizing: border-box;
}
}

.icon {
display: inline-block;
width: 16px;
height: 16px;
background-color: green;
}

&.hidden {
.col1 {
margin-left: Calc(-100% - 4rem);
}
}
}

Код: Выделить всё

Toogle



text 1

Вот код для этого
https://codepen .io/Damir-Secki/pen/XWQLYXY?editors=1111
Мое желаемое решение заключалось бы в том, чтобы, когда я нажимаю переключатель и применяется скрытый класс, анимировать диапазон внутри метки, чтобы он исчез влево... до такой степени, что будет виден только значок метки... (перевести-x или поле влево)... без использования дополнительного JS.... так что именно ширина диапазона< /p>
Абсолютно идеально было бы, чтобы и диапазон, и значок исчезали влево, но вскоре после этого появлялся только значок (скользил вправо)

Подробнее здесь: https://stackoverflow.com/questions/784 ... ut-adjusts