JSFiddle - React, Tailwind, and code Playground

by Dygerati

HTML

<ul>

    <li><a href='#'>Item 1</a><input type='text' value='whatever' /></li>
    <li><a href='#'>Item 2</a></li>
    <li><a href='#'>Item 3</a></li>
    <li><a href='#'>Item 4</a></li>

</ul>

CSS

ul li {
  width: 300px;
  border: 1px solid red;  
    position: relative;
    overflow: hidden;
}

ul li a {
  float: left;   
  width: 100px;
}

ul li input {
 position: absolute;
  left: 100px;
    right: 0;
}