JSFiddle - React, Tailwind, and code Playground

by dimskraft

HTML

<div id="outer">
    
    <div id="first">I wish to go right and have 10 pixels from right</div>
    
    <div id="second">I wish to be left and have 0 pixels from left</div>
    
    <div id="third">I wish to be centered horizontally, and this is the only thing I can!!!</div>
    
</div>

CSS

#outer {
    position: relative;
    width=100%;
}

#first {
    display: inline-block;
    background-color: red;
    width:100px;
    margin-right:10px;
}

#second {
    position: relative;
    background-color: green;
    width:100px;
}

#third {
    position: relative;
    background-color: yellow;
    width:100px;
    margin-left: auto;
    margin-right: auto;
}