JSFiddle - React, Tailwind, and code Playground

HTML

<p>Pixel fixed space between two dynamically sized blocks:</p>

<div class="cont">
    <div class="left"><p>foo</p></div>
    <div class="right">bar</div>
</div>

<p>Resize this window to try it out.</p>

<p>In this case space between two blocks are 30px;</p>

CSS

.cont{
    outline: 5px solid #ddd;
    position: relative;
    height: 50px;
    display:table;
    width:100%;
    border-spacing: 10px 0px;
}

.left, .right {
    border:1px solid #F0F;
   
}

.left {
    display:table-cell;
    position:relative;
    left:-10px;
}

.right {
    display:table-cell;
    position:relative;
    right:-10px;
}


p{ margin: 1em 0; }