JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div class="left">
    <p>This div has a fixed width of 300px.
        <p>
</div>
<div class="right">
    <p class="withMargin">This div is responsive and fills up the remaining width, which it is doing just fine. However, this paragraph has a top and bottom margin of 100px - the white space above this paragraph should also be pink, but it isn't. It also pushes down the left yellow div by 100px, which it shouldn't do either. This whole situation can be fixed by changing this div to overflow: auto, but I require overflow: visible for a very specific need.</p>
</div>
        
<div class="left">
    <p>This div has a fixed width of 300px.
        <p>
</div>
<div class="right">
    <p class="withMargin">This div is responsive and fills up the remaining width, which it is doing just fine. However, this paragraph has a top and bottom margin of 100px - the white space above this paragraph should also be pink, but it isn't. It also pushes down the left yellow div by 100px, which it shouldn't do either. This whole situation can be fixed by changing this div to overflow: auto, but I require overflow: visible for a very specific need.</p>
</div>

CSS

.left {
    background-color: yellow;
    width: 300px;
    height: 100%;
    float: left;
}
.right {
    background-color: pink;
    height: 100%;
    margin-left: 320px;
    overflow: visible;
}
p {
    margin: 0;
    padding: 10px;
    color: black;
}
p.withMargin {
    margin-top: 100px;
    margin-bottom: 100px;
    display:inline-block;
}