side by side divs right left float

by greatCar

HTML

<div class="outerDiv">

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


<div class="rightDiv">

<div style="Xmargin-left:30px; margin-top:15px;" class=" spinInline XstatusProgress"></div>

</div>

</div>

CSS

.outerDiv
	{
		background-color: #006699;
		color: #fff;
		height: 400px;
		width: 600px;
		margin: 0px auto;

	}
	.leftDiv
	{
		background-color: #efefef;
		color: #000;
		height: 400px;
		width: 50%;
		float: left;
	}
	.rightDiv
	{
		background-color: #efefef;
		color: #000;
		height: 400px;
		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: 30px;
  width: 30px;
  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;
}