<form action="#">
  <label class="input-sizer">
    <span>Name: </span>
    <input type="text" onInput="this.parentNode.dataset.value = this.value" size="4" placeholder="John">
  </label>

  <label class="input-sizer">
    <span>DOB: </span>
    <input type="text" onInput="this.parentNode.dataset.value = this.value" size="1" placeholder="5">
  </label>

  <label class="input-sizer stacked">
    <span>Text: </span>
    <textarea oninput="this.parentNode.dataset.value = this.value" rows="1" placeholder="hi"></textarea>
  </label>
</form>

*,
*::before,
*::after { 
  box-sizing: border-box;
}

.input-sizer {
  display: inline-grid;
  vertical-align: top;
  align-items: center;
  position: relative;
  border: solid 1px;
  padding: .25em .5em;
  margin: 5px;
  
  &.stacked {
    padding: .5em;
    align-items: stretch;
    
    &::after,
    input,
    textarea {
      grid-area: 2 / 1;
    }
  }
  
  &::after,
  input,
  textarea {
    width: auto;
    min-width: 1em;
    grid-area: 1 / 2;
    font: inherit;
    padding: 0.25em;
    margin: 0;
    resize: none;
    background: none;
    appearance: none;
    border: none;
  }
  
  span {
    padding: 0.25em;
  }
  
  &::after {
    content: attr(data-value) ' ';
    visibility: hidden;
    white-space: pre-wrap;
  }
  
  &:focus-within {
    outline: solid 1px blue;
    box-shadow: 4px 4px 0px blue;
    
    > span { color: blue; }
    
    textarea:focus,
    input:focus {
      outline: none;
    }
  }
}

.input-sizer {
  box-shadow: 4px 4px 0px #000;
  > span {
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 2px 2px 0 rgba(0,0,0,.15);
  }
}
/* ---------------------------------- */

// .input-sizer {
//   display: inline-block;
//   position: relative;
//   width: fit-content;
//   min-width: 9em;
//   height: 1.8em;
//   border: solid 1px;
//   padding: .25em .5em;
  
//   input {
//     position: absolute;
//     top:0;
//     left:0;
//     width:100%;
//     height:100%;
//     font: inherit;
//     padding: inherit;
//     margin:0;
//     appearance: none;
//     border: none;
//   }
// }

// .input-sizer::after {
//   content: attr(data-value) ' ';
//   visibility: hidden;
// }

// Array.from( document.querySelectorAll('[data-expand]'), (input)=>{
//   let parent = input.parentNode;
//   function updateSize(){
//     parent.dataset.value = input.value
//   }
//   input.addEventListener('input', updateSize);
//   updateSize();
// });