I have a fairly simple layout for a form field...It is divided in 2 columns, label on the left and input on the right
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); } }}<button onclick="toggle()">Toogle</button><div class="wrapper"><div class="col col1"><label><span>text 1</span><div class="icon"></div></label></div><div class="col col2"><input type="text" value="TEXT"></div></div>Here is the codepen for ithttps://codepen.io/Damir-Secki/pen/XWQLYXY?editors=1111
My desired solution would be that when I click toggle and class hidden is applied - to animate span inside of the label to disappear to the left... to the point that only the icon of the label would be visible... (translate-x or margin-left) ... without using extra JS.... so exactly the width of the span
absolutely perfect would be that both span and icon disappear to the left, but then soon after only icon appears (slides to the right)
