JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
  </head>

  <body>

    <article id="demo">
      <label>a</label><input type="text" placeholder="b" /><button>c</button><button>d</button><button>e</button>
    </article>

    <article id="width-toggling">
      <input type="text" id="width-value" placeholder="CSS width (ex: 70vw)" />
      <button onclick="resizeResponsiveElement()">Update width</button>
    </article>
    
  </body>

</html>

CSS

article#demo {
  width: 80vw;
  margin: auto;
  border: 1px solid;
  /* the width (80vw) includes border and padding */
  box-sizing: border-box;
}

article#demo label {
  /* to make label resizable */
  display: inline-block;
  width: 30px;
  background-color: #fff0f0;
  border: 1px solid black;
  box-sizing: border-box;
  /* see above */
}

article#demo button {
  width: 20px;
  margin: 0;
  padding: 0;
  background-color: #f0f0ff;
  border: 1px solid black;
  box-sizing: border-box;
  /* see above */
}

article#demo input[type="text"] {
  background-color: #fffff0;
  border: 1px solid black;
  box-sizing: border-box;
  /* text input width = 100% minus other items */
  width: calc(100% - 30px - 3 * 20px);
}

article#width-toggling {
  width: 90wv;
  margin: 1em auto 0 auto;
  text-align: center;
}

JavaScript

function resizeResponsiveElement() {
  var e = document.getElementById("demo");
  var f = document.getElementById("width-value");

  e.style.width = f.value;
}