CSS width "px" adjusts my input textfield but not "%"

Question

I have an input textfield that I would like to fill the entire grid column (using primeflex). I thought that simply adding "width: 100%" (w-full) would fix the empty space. It does not seem to adjust even with "w-full" having "!important".

I tried adjusting it manually like putting "width:200px;" but this does not seem to be dynamic thats why I want to just have it as "width: 100%". For context, my text field is under class="field".

<div class="field">
  <dt class="w-1">住所</dt>
  <div>
    <input class="p-inputtext p-component w-full" data-pc-name="inputtext" data-pc-section="root">
  </div>
</div>

• w-full is not working as intened
• class="field" has the following:

display: flex;
flex-direction: row;
margin: 0;
margin-top: 1px;
margin-bottom: 1px;

• Note: in my input class, adding style="width:100%" does not work but adding style="width:500px" somehow does. Again my intention is to not add a manual length to have it still be dynamic.

Answer 1

  <div class="w-full">
    <input class="w-full p-inputtext p-component w-full" data-pc-name="inputtext" data-pc-section="root">
  </div>

So I only just had to put the full with both in div and input in order for it to work.