Styling!

stroll.html

@@ -19,20 +19,24 @@
       <div></div>
       <button id=button-stroll>Stroll</button>
 
-      <p>Stats</p>
-      <div id=height></div>
-      <div id=mass></div>
-      <div class=stat-header id=stats-stomped>
-        <p>Stomped</p>
-      </div>
-      <div class=stat-header id=stats-digested>
-        <p>Digested</p>
-      </div>
-      <div class=stat-header id=stats-stomach>
-        <p>Stomach</p>
-      </div>
-      <div class=stat-header id=stats-bowels>
-        <p>Bowels</p>
+      <div class=flex-container>
+        <div class=stat-header id=stats-self>
+          <p>Stats</p>
+          <div class=stat-line id=height></div>
+          <div class=stat-line id=mass></div>
+        </div>
+        <div class=stat-header id=stats-stomped>
+          <p>Stomped</p>
+        </div>
+        <div class=stat-header id=stats-digested>
+          <p>Digested</p>
+        </div>
+        <div class=stat-header id=stats-stomach>
+          <p>Stomach</p>
+        </div>
+        <div class=stat-header id=stats-bowels>
+          <p>Bowels</p>
+        </div>
       </div>
     </div>
   </body>

style.css

@@ -1,7 +1,14 @@
+
+body {
+  background: #eee;
+  font-family: Arial;
+}
+
 #log {
   height:600px;
-  width:600px;
+  width:1000px;
   border:1px solid #ccc;
+  background-color: #fff;
   overflow:auto;
   float:left;
 }
@@ -9,9 +16,19 @@
 .stat-header {
   font-weight: bold;
   font-size: 150%;
+  min-width:130px;
 }
 
 .stat-line {
   font-weight: normal;
   font-size: 12pt;
 }
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.action-button {
+  
+}