JSFiddle - React, Tailwind, and code Playground

by eccentric_j

HTML

<div id="main">
  <h1>Form Styling Solutions</h1>
  <p>If you have ever worked with HTML input elements you may have noticed width: 100%; doesn't have the desired effect nor does display: block; &amp; width: auto;</p>
  <p>The best solution I've come up with for this solution is to use absolute positioning with left:0;
  <form method="post" action="#">
 <ul>
  <li>
    <div class="label">
      <label for="block_styled">Problem: Input Width 100% Styling
      
      </label>
    </div>
    <div class="input fixed">
      <input type="text" name="block_styled" id="block_styled" value="{ width: 100%; display: block; }" />
    </div>
  </li>
  <li>
    <div class="label">
      <label for="absolute_styled">Solution: Absolute Position Styling
      
      </label>
    </div>
    <div class="input absolute">
      <input type="text" name="block_styled" id="absolute_styled" value="{ width: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }" />
    </div>
  </li>
 </ul>
    <p>Unfortunately, the working solution comes at the cost of having to establish a min-height for the div.input containers to specify a height for the input[type="text"] elements. Plus a few more CSS lines.</p>
</form>
</div>

CSS

div#main {
  margin: 1rem;
}
h1 {
  font-size: 200%;
}
p {
  margin: 0.5rem 0;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  padding: 0.5rem;
  border: 1px solid #999;
  margin: 0.5rem 0;
}
li::after {
  content: '.';
  font-size: 0;
  display: block;
  clear: both;
}
li .label {
  float: left;
  width: 30%;
}
li .label label {
 padding-right: 0.5rem;
 display: block;
}
li .input {
  float: right;
  width: 70%;
  /* Required for solution #2 */
  position: relative;
  min-height: 45px;
}
li .input.fixed {
   text-align: right;
}
li input[type="text"] 
{
  padding: 0.5rem;
  font-size: 140%;
}
/* Problem: Position Absolute */
li .input.fixed input {
  width: 100%;
  display: block;
}
/* Solution #2: Position Absolute */
li .input.absolute input {
  width: auto;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}