JSFiddle - React, Tailwind, and code Playground

by ShaCP

HTML

<div id="container" class="container">
  <div><textarea class="input"></textarea></div>
  <div><textarea class="input"></textarea></div>
  <div><textarea class="input"></textarea></div>
    <div class="input image_input">
      <div class="image_container">IMG</div><input type="file" class="image_picker">
  </div>
</div>

CSS

.container {
  --img-input-width: 4rem;
  --num-of-children: 4;
  --column-gap: 1rem;
  --num-of-gaps: calc(var(--num-of-children) - 1);
  --total-gap-space: calc(var(--num-of-gaps) * var(--column-gap));
  --side-padding: 1rem;
  --ttl-side-pddng-sps: calc(var(--side-padding) * 2);
  --num-of-fields: 3;
  --fieldWidth: 100%;
  --total-field-space: calc(var(--num-of-fields) * var(--fieldWidth));
  --total-children-space: calc(var(--total-field-space) + var(--img-input-width));
  /* to enlarge to 100% of the outer multiply 100% times the 
  number of fields/textareas and add the size of the static
  image input; divide the result accordingly to enlarge to a lower %*/
  --100-prcnt-cntnr-width: calc(var(--total-children-space) + var(--total-gap-space) + var(--ttl-side-pddng-sps));
  --50-prcnt-cntnr-width: calc(var(--100-prcnt-cntnr-width) / 2);
  --txt-area-height: 2.2rem;
  background-color: blue;
  display: flex;
  padding: 0.5rem var(--side-padding);
  column-gap: var(--column-gap);
  position: relative;
}

textarea {
  resize: none;
  height: var(--txt-area-height);
  width: var(--fieldWidth);
  z-index: 0;
  background: white;
  transition: width 0.5s, height 0.5s, left 0.5s, right 0.5s, z-index 0.5s step-end;
  overflow: hidden;
  margin: 0 auto;
  border: 0;
  outline: 1px solid;
  outline-offset: -1px;
}

.container>div>* {
  position: absolute;
  /*   visibility: hidden; */
}

textarea:focus {
  /* width: min(400px, calc(100% - 3rem)); */
  width: var(--50-prcnt-cntnr-width);
  height: 10rem;
  z-index: 1;
  transition: width 0.5s, height 0.5s, left 0.5s, right 0.5s, z-index 0s;
  overflow: auto;
}

.container>div {
  height: var(--txt-area-height);
  transition: width 0.5s, height 0.5s;
  /* background-color: white; */
  flex: 1;
  position: relative;
}

.container>div:not(:last-child) {
  margin: 0.9rem 0;
}

.container>div:focus-within {
  height: 10rem;
}

/* .container:focus-within textarea:not(:focus) {
  height: 0;
  padding: 0;
  border: 0;
}...

JavaScript

/* container.addEventListener('focusin', ({
  target: focusTarget,
  currentTarget: container,
  type
}) => {
  console.log(focusTarget, container, type)



  if (!focusTarget.className.includes('input'))
    return;
  // new
  // focusTarget.style.right = `${(focusTarget.offsetWidth * 1.2) - focusTarget.offsetWidth}px`;
  focusTarget.classList.add('focused')
  // new
  focusTarget.classList.add('active')
  container.addEventListener('focusout', ({
    target: blurTarget
  }) => {
    // new 
    blurTarget.classList.remove('focused')
    //blurTarget.style.right = '0px';
    // new 
    const removeClasses = () => {
      blurTarget.classList.remove('active')
    }
    if (document.activeElement === blurTarget) {
      removeClasses();
      return;
    }
    container.addEventListener('transitionend', removeClasses, {
      once: true
    })
  }, {
    once: true
  })
})
 */