sortingcss.css

*{
 box-sizing:border-box;
 font-family:calibri;
}
body{
 margin:0;
}
.parent{
 width:100%;
 height:auto;
 float:left;
}
.header{
 width:100%;
 height:70px;
 float:left;
 background-color:rgb(107,54,114);
}
.name,.size,.algorithm{
 width:20%;
 height:70px;
 float:left;
}
.algorithm{
 width:30%;

}
.size{
margin-left:5%;

}
.size label{
 margin:0;
 line-height:70px;
 color:#ffffff;
 font-size:1em;
 
}
.name h1,.size h1{
 margin:0;
 line-height:70px;
 color:#ffffff;
 font-size:1em;
 text-align:center;
}
.name h1{
 font-size:1.5em;
}
.lab{
 margin:0;
 line-height:70px;
 color:#ffffff;
 font-size:1em;
 text-align:center;}
.algorithm select,.size select{
 width:70%;
 height:35px;
 border-radius:5px;
 border:none;
 padding:5px;
}
.size select {
 width:30%;
 height:30px;
}
.sort{
 width:10%;
 height:70px;
 float:left;

}
.sort button{
 width:50%;
 height:30px;
 border:none;
 border-radius:5px;
 margin-top:20px;
 }
 
 /*now data section css starts here to append element according to the need*/
 .parent_data{
  width:100%;
  height:auto;
  float:left;
  text-align:center;
 }
 .data{
  width:auto;
  height:500px;
  display:inline-block;
  margin:0 auto;
  
 }
.pad{
 height:200px;
 width:auto;
 background-color:#42cbf5;
 float:left;
 width:20px;
 text-align:center;
 margin-left:5px;
 color:#ffffff;
 font-weight:bold;
 font-size:.7em;
 
}