JSFiddle - React, Tailwind, and code Playground

HTML

<div class="banana"></div>
<div class="strawberry"></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
    box-sizing: border-box;
}
div {
    float: left;
}
.banana {
    width: 80%;
    height: 40%;
    background: #FFE135;
}
.strawberry {
    background: #FC5A8D;
    margin-left: 10px;
    padding: 8px;
}

JavaScript

$(".banana + .strawberry").css({
    "minHeight": function () {
        var $this = $(this),
            banana = $this.prev(".banana"),
            bh = banana.outerHeight();
        return bh;
    },
        "width": function () {
        // Many variables, but they allow a highly
        // customized CSS file
        var $this = $(this),
            margin_l = parseInt($this.css("marginLeft"), 10),
            margin_r = parseInt($this.css("marginRight"), 10),
            padding_l = parseInt($this.css("paddingLeft"), 10),
            padding_r = parseInt($this.css("paddingRight"), 10),
            border_l = parseInt($this.css("borderLeftWidth"), 10),
            border_r = parseInt($this.css("borderRightWidth"), 10),
            parent = $(this).parent(),
            pw = parent.width(),
            banana = $this.prev(".banana"),
            tw = banana.outerWidth();

        console.log(margin_l);
        return (pw - tw - margin_l - margin_r - padding_l - padding_r - border_l - border_r);

    }
});