JSFiddle - React, Tailwind, and code Playground

by keruilin

HTML

<div class="challengeOpponent">
    <div class="leftSide">
        <div class="selectFriendWrapper">
            <div class="stepHeading">Step 1 Heading</div>
            <div class="friendsListWrapper">
                <div class="friendsList">Friends List</div>
            </div>
        </div>
    </div>
    
    <div class="rightSide">
        <div class="choseStakesWrapper">
            <div class="stepHeading">Step 2 Heading</div>
            <div class="chooseStakes">Choose Stakes</div>
        </div>
        <div class="declareOffenseWrapper">
            <div class="stepHeading">Step 3 Heading</div>
            <div class="declareOffense">Declare Offense</div>
        </div>
    </div>
    
    <div class="bottomHalfWrapper">
        <div class="bottomHalf">
            <div class="bottomLeft">
                <div class="alternativeSelectFriendWrapper">
                    <div class="alternativeHeading">OR</div>
                    <div class="emailFriendWrapper">
                        <div class="emailFriend">Email Friend</div>
                    </div>
                </div>
            </div>
            <div class="bottomRight">
                <div class="submitChallengeWrapper">
                    <div class="submitChallenge">Submit&nbsp;Cancel</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.challengeOpponent {position: absolute; width: 100%; border: 0px black solid;}

.challengeOpponent .leftSide {position: relative; float: left; width: 50%; border: 0px black solid;}

.challengeOpponent .leftSide .selectFriendWrapper {}

.challengeOpponent .leftSide .selectFriendWrapper .stepHeading {font-weight: none;}

.challengeOpponent .leftSide .selectFriendWrapper .friendsListWrapper {}

.challengeOpponent .leftSide .selectFriendWrapper .friendsListWrapper .friendsList {}

.challengeOpponent .rightSide {position: relative; float: right; width: 50%; border: 0px black solid;}
.challengeOpponent .rightSide .choseStakesWrapper {}
.challengeOpponent .rightSide .choseStakesWrapper .stepHeading {}
.challengeOpponent .rightSide .choseStakesWrapper .chooseStakes {}
.challengeOpponent .rightSide .declareOffenseWrapper {}
.challengeOpponent .rightSide .declareOffenseWrapper .stepHeading {}
.challengeOpponent .rightSide .declareOffenseWrapper .declareOffense {}

.challengeOpponent .bottomHalfWrapper {position: relative; width: 100%; clear: both; border: 0px black solid;}

.challengeOpponent .bottomHalfWrapper .bottomHalf {position: absolute; width: inherit; border: 0px black solid;}

.challengeOpponent .bottomHalfWrapper .bottomHalf .bottomLeft {position: relative; width: 50%; float: left; border: 0px black solid;}

.challengeOpponent .bottomHalfWrapper .bottomHalf .bottomLeft .alternativeSelectFriendWrapper {}

.challengeOpponent .bottomHalfWrapper .bottomHalf .bottomLeft .alternativeSelectFriendWrapper .alternativeHeading {}

.challengeOpponent .bottomHalfWrapper .bottomHalf .bottomLeft .alternativeSelectFriendWrapper .emailFriendWrapper {}

.challengeOpponent .bottomHalfWrapper .bottomHalf .bottomLeft .alternativeSelectFriendWrapper .emailFriendWrapper .emailFriend {}

.challengeOpponent .bottomHalfWrapper .bottomHalf .bottomRight {position: relative; width: 50%; float: right; border: 0px black solid;}

.challengeOpponent .bottomHalfWrapper .bottomHalf .bottomRight...