JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="margin">
        <div id="child">
            I am taking up <em>100% + 10px</em> width,<br />
            but the margin div shrinking 100% by 10px so it works. 
        </div>
    </div>
</div>

CSS

#parent {
    background-color: #000;
    padding: 5px;
}

#child {
    width: 100%;
    padding: 5px;
    background-color: #00f;
    color: #fff;
}

#margin {
    margin-right: 10px;
    background-color: #f00;
}