Flex Demo

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700"></script>
<body>
	<div id="topSegment">
		<a href="index.html">
			<img src="Weather%20Icon.svg" alt="CGS Weather Icon" id="frontLogo" >
		</a>
		<div id="searchBar">
			<div id="outer">
				
			</div>
		</div>
		<div id="weatherInformation">
			<p>CAMBERWELL, MELBOURNE</p>
			<hr id="underline">
			<p>28&deg;</p>
		</div>
		<div id="gradient"></div>
	</div>
	<div id="content"></div>
</body>

CSS

@font-face {
  font-family: Comfortaa;
  src: url("Comfortaa-Light.ttf") format("truetype");
}

@font-face {
  font-family: Neue;
  src: url("HelveticaNeue-Thin.otf") format("opentype");
}

body {
  position: absolute;
  margin: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: white;
}

#topSegment {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 600px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background: purple;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, rgba(181, 91, 184, 1), rgba(62, 71, 130, 1));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, rgba(181, 91, 184, 1), rgba(62, 71, 130, 1));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, rgba(181, 91, 184, 1), rgba(62, 71, 130, 1));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, rgba(181, 91, 184, 1), rgba(62, 71, 130, 1));
  /* Standard syntax */
}

#frontLogo {
  width: 369.9px;
  height: 350px;
  margin: 125px;
}

#searchBar {
  flex: 1;
  margin-right: 125px;
  margin-left: 0px;
  margin-top: 75px;
  margin-bottom: 75px;
  background-color: rgb(74, 74, 74);
  height: 50px;
  border-radius: 25px;
}

#weatherInformation {
  flex: 1;
  margin: 125px;
  margin-left: 0px;
}

#weatherInformation p {
  margin: 0px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: white;
  font-size: 2em;
}

#underline {
  margin: 0px;
  padding: 0px;
  width: 0%;
  visibility: hidden;
  animation-name: expand;
  animation-delay: 0.75s;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  /* Chrome, Safari, Opera */
  animation-fill-mode: forwards;
}

@keyframes expand {
  from {
    width: 0%;
  }
  to {
    width: 100%;
    visibility: visible;
  }
}

#gradient {
  position:...