JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Title<span>span</span></li>
    <li>Title<input value="I know that I can do this but I need the one below to work without being wrapped"></li>
     <li>Title<input></li>
 </ul>

CSS

ul {
    width       : 95%;
    border      : 1px solid #000;
    font        : 12px/1.4 tahoma;
    padding     : 5px;
}

li {
    background-color : #EEE;
    margin           : 2px;
    padding          : 3px;
    position         : relative;
}

input, span {
    display    : block;
    position   : absolute;
    left       : 20%;
    right      : 0px;
    border     : 1px solid #000;
    top        : 3px;
    background : #FFF;
    width      : 80%;
}