JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Title<span>span</span></li>
    <li>Title<span style="border:0px"><input style="width:100%;left:0px" value="I know that I can do this but I need the one below to work without being wrapped"></span></li>
    <li class="test1">Title<input value="some value"></li>
</ul>

CSS

ul {
    margin: 0; 
    padding: 0; 
    list-style : none;
    width       : 95%;
    border      : 1px solid #000;
    font-family : tahoma;
    padding     : 5px;
}

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


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


.test1 input {
    padding-left: 100px; /* need this as left side of input is clipped off */
    width: 100%;
    height: 20px; /* makes fake border easier sized */
    left: 0;
    top: 3px;
    clip:rect(auto,auto,auto,100px);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.test1:after { /* fake left border for clipped input */
    content: "";
    width: 1px;
    background: #000;
    position: absolute;
    left: 100px;
    top: 3px;
    height: 20px;
}