JSFiddle - React, Tailwind, and code Playground

HTML

<form action="/about/#wpcf7-f104-o3" method="post" class="wpcf7-form" novalidate="novalidate">

<div class="inner">

  <label>Email</label><span class="wpcf7-form-control-wrap email">
<input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" autocapitalize="off" autocorrect="off" autocomplete="off"></span><p></p>

</div>


<div class="inner">
<label>Phone#</label><br>
<input type="tel" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel phone-inpt" aria-required="true" aria-invalid="false" autocapitalize="off" autocorrect="off" autocomplete="off"><p></p>
</div>

<div class="inner sbm">
  <input type="submit" class="sbmit-btn btns" value="Submit" autocapitalize="off" autocorrect="off" autocomplete="off">
</div>
<div id="qwerty">0</div>
</form>

CSS

input {
  width: 100%;
}

JavaScript

$(function(){
$("#qwerty").text($("input").width());
});