JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Margin border</title>
<style type="text/css">
body {
    line-height: 38px;
    font-size: 32px;
}

#panel1 {
    background: #00a000;
    float: left;
}

#panel2 {
    background: orange;
    float: left;
}

#panel1 p span {
    font-size: 12px;
    line-height: 12px; 
}
</style>
</head>
<body>

    <div id="panel1">
        <p>Foo <span>Bar</span></p>
    </div>

    <div id="panel2">
        <p>Foo <span>Bar</span></p>
    </div>

</body>
</html>