JSFiddle - React, Tailwind, and code Playground

HTML

<br>





<ul id="status"></ul>







































<div id="accomplishments_box">
 
</div>




<form action="" class="fait_field" method="post">
<textarea id="fait_accompli_field" >I graduated from UGA with a degree in history with a Cum Laude.</textarea>
<input type="button" id="fait_accompli_submit" value="Submit/Edit">

</form>





<div id="links">What to put here... What to put here...</div>



<ul id="ul_of_show_buttons">

<li id="show_the_posts"><input type="button" value="Show Posts" id="show_the_posts_button" /></li>

<li id="show_the_badges"><input type="button" value="Show Badges" id="show_the_badges_button"></li>




<!--challenge code here -->


<ul id="challenge_options">


<li><input type="button" id="create_challenge_button" value="+" /></li>











</ul>

</ul>



<ul id="post_box">

</ul>

CSS

*{padding:0px; margin: 0px;}

html {margin-left: 10px;}

img {clear: both; }

#status { width: 200px; height: 35px; clear: both;}




#links {float: left; width: 45%; height: 200px; border: solid 1px black;}
#accomplishments_box{clear:both; float:right; width: 45%;}



.post_field {clear: both; width: 75%;  margin-left:10%; margin-right:10%;}


.fait_field {float: right; width: 45%;}
#fait_accompli_field {width:500px; height:200px;}
#fait_accompli_submit { float: right; margin-right: 40px;}

#post_box {width: 75%;  margin-left:10%; margin-right:10%; clear: both;}
#more_posts {    margin-left:45%; margin-right:45%;}


#ul_of_show_buttons { height:240px; position:relative;}
#show_the_posts { display: inline; position: relative; left: 15px;}
#show_the_badges {display:inline; position:relative; left: 11px;}