JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outline">
    <div id="header">
        <div id="familyH">Family</div>
        <div id="friendsH">Friends</div>
    </div>
    <br/>
    <hr/>
    <div id="body">
        <div id="family">
            <div>Family Stuff</div>
        </div>
        <div id="friends">
            <div>Friends Stuff</div>
        </div>
    </div>
</div>

CSS

#outline {
    border:1px solid;
    width: 100px;
    height: 300px;
}

#familyH {
    float: left;
    font-type: bold;
}

#friendsH {
    float: right;
}

#family {
    display: block;
}

#friends {
    display: block;
}

JavaScript

$(document).ready(function() {
    /* $("#familyH").on( "click", function () {
        $("#family").css( "display","block" );
        $("#friends").css( "display","none" );
    }); 
    $("#friendsH").on( "click", function () {
        $("#friends").css( "display","block" );
        $("#family").css( "display","none" );
    }); */
    $('#friends').append(
    	$('<hr>').attr('width', '50%')
    );
});