Css for basic layout of single and multi day

src/Components/MultiDayForecast/Component.css

@@ -0,0 +1,7 @@
+.MultiDayForecast {
+    width: 100%;
+    height: 100%;
+
+    padding: 2em;
+    /* background-color: lightcoral; */
+}

src/Components/SingleDayForecast/Component.css

@@ -1,21 +1,66 @@
-.WeatherApp {
+.SingleDayForecast {
-  text-align: center;
+  float: left;
+  width: 20%;
+  height: 100%;
+
+  padding: 0 .5em;
+
+  font-size: 1.25em;
 }
 
-.WeatherApp-header {
+.SingleDayForecast .SingleDayForecast-inner {
-  background-color: #222;
-  color: white;
-
   width: 100%;
-  height: 10vh;
+  height: 100%;
+  
+  padding: 0 0.5em;
+  
+  border: 2px solid gray;
 }
 
-.WeatherApp-title {
+.SingleDayForecast .forecast-summary {
-  padding: 3.5vh 0;
+  padding-bottom: .5em;
-  font-size: 3vh;
+  border-bottom: 2px solid #000;
 }
 
-.WeatherApp-body {
+.SingleDayForecast .forecast-summary>* {
-  width: 100%;
+  padding: 0.125em 0;
-  height: 90vh;
+}
+
+.SingleDayForecast .summary-weather-description {
+  padding-bottom: .25em;
+}
+
+.SingleDayForecast .summary-weather-icon-container {
+  padding: .75em 0;
+}
+
+.SingleDayForecast .summary-date {
+  font-size: 1.5em;
+}
+
+.SingleDayForecast .summary-temp,
+.SingleDayForecast .summary-humidity {
+  margin: auto;
+  width: 70%;
+}
+
+.SingleDayForecast .temp-desc,
+.SingleDayForecast  .temp-value,
+.SingleDayForecast  .humidity-desc,
+.SingleDayForecast  .humidity-value {
+  float: left;
+}
+
+.SingleDayForecast .temp-desc,
+.SingleDayForecast  .humidity-desc {
+  width: 30%;
+}
+
+.SingleDayForecast .temp-value,
+.SingleDayForecast .humidity-value {
+  width: 70%;
+}
+
+.SingleDayForecast .clearfix {
+  clear: both;
 }