JSFiddle - React, Tailwind, and code Playground

HTML

<DIV id="sidebar">
    <p  class="w">
        Setting both left and right CSS values..<br/>
        <b>Why &lt;input&gt; is different??</b>
    </p>
    <input class="x" type="text" value="input" />
    <br/>
    <div class="x">div</div>
    <br/>
    <span class="x" style="inline-block">inline block</span>    
    <br/>
</DIV>

CSS

BODY { height: 100% } /* Required for percentage heights below */
#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    left: 0;
    right: auto;
    width: 160px;
    background-color: green;
}
br { line-height: 28px; }
#sidebar .w { color: white; }
#sidebar .x {
    position: absolute;
    border: 1px solid red;
    box-sizing  : border-box;
    margin: 0;
    padding: 0;
    height: 21px;
    left: 30px;
    right: 30px;
    width: auto;
    background-color: yellow;
}