side by side divs right left float noheight

by greatCar

HTML

<div class="outerDiv">

  <div class="leftDiv">
    Generating PDF, please wait ...
  </div>


  <div class="rightDiv">

    <div style="margin-top:10px;" class=" spinInline"></div>

  </div>

</div>

CSS

.outerDiv
	{
		margin: 0px auto;

	}
	.leftDiv
	{
		width: 50%;
		float: left;
	}
	.rightDiv
	{
		width: 50%;
		float: right;
	}	
  
  @keyframes spinner {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

.statusProgress {
  /*margin-left: 10px;*/
  /*margin-right:20px;
        width:30px;
        height:30px;*/
  /*display:inline;*/
  position: relative;
  display: inline;
}

.spinInline::before {
  animation: .9s linear infinite spinner;
  animation-play-state: inherit;
  border: solid 5px #cfd0d1;
  border-bottom-color: #1c87c9;
  border-top-color: #1c87c9;
  /*border-left-color: white;*/
  border-radius: 50%;
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  /*top: 10%;
    left: 10%;*/
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}

.spin::before {
  animation: .6s linear infinite spinner;
  animation-play-state: inherit;
  border: solid 5px #cfd0d1;
  border-bottom-color: #1c87c9;
  border-left-color: white;
  border-radius: 50%;
  content: "";
  height: 30px;
  width: 30px;
  position: absolute;
  top: 10%;
  left: 10%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}