I can't place two tables side by side. I have tried using negative margin. If I float left, it does not display as intended when the html page is converted to pdf.

```css
html,body{
 font-family: Arial;
 font-size:12px;
 margin:0;
    height:297mm;
    width:210mm;
}
.wrapper{
 margin: 10px 0 10px 0; 
}
.header{
  width:100%;
  height:100px;
}
.image{
  float: left;
  width:15%;
  margin-left:5%;
  height:100px;
  width:100px;
}
.image img{
 margin-top:10px;
 height:99px;
 width:99px;
}
.headline{
 margin-top:15px;
 font-size:30px;
 font-weight:bold;
 float: left;
 width:100%;
 text-align: center;
}
.tagline{
 font-size:15px !important;
 font-weight: regular;
 font-style:italic;
 margin-top: 5px;
}
.table_wrapper{
 /*padding:0 5%;*/
 border: 2px solid #000;
 float:left;
 margin:15px;
}

.student_info table{
 width: 100%;
 height: 100px;
 /*float: left;*/
 padding: 15px;

} 
.student_info table,.student_info th,.student_info td,
.remark table,.remark th,.remark td
{
    border: 0px solid #000 !important;
}

.subject{
 width:150px;
 margin-left: 20px;
 text-align: left;
}

.score{
 width:40px;
}

.remark{
 margin-bottom:30px;
 line-height:2;
}

.student_info table tr td img{
 height:100px;
 width:80px;
 float: right;
}

.tag_bold{
 font-weight: bold;
}
.chartz{
 padding: 5px;
 background-color: green;
}
.chartz table td{
 height:14px;  
}
 .chartz table{
 height:20px;
 border-collapse: collapse;
}
.chartz table, th, td {
    border: 1px solid black;
}
.txt_rotate{
  /*-ms-transform: rotate(-90deg); *//* IE 9 */
    /*-webkit-transform: rotate(-90deg);*/ /* Safari 3-8 */
    /*transform: rotate(-90deg);*/
 padding: 50px 0;
}
.mark_chart{
 /*float:left;*/
 padding-right: 10px;
 width: 50%;
 text-align:center;
 font-weight:bold;
 background-color: blue;
 margin-right: -800px;
}
.txt_colr{
 color: #5151FF;
}
.txt_colr_red{
 color:red;
}
.txt_colr_green{
 color: green;
}
.head_title{
 font-size: 8px;
 padding: 40px 0 !important;
}
.social_chart{
 width: 20%;
 margin-bottom: 5%;
 background-color: red;
 /*float: left;*/
 margin-right: -800px;
}
.social{
 padding:43px 0;
 text-align:center;
 }
.mark_chart table{
 width:100%;
}
.social_chart table{
 width:100%;
}
.habit_chart, .behaviour_chart, .class_chart{
 padding: 0 0 20px 0;
}
.remark{
 float: left;
 margin-left:2%;
 width:100%;
}
.remark table{
 width:90%;
}
.footer{
 width:100%;
 text-align:center;
 margin: 30px 0;
 font-weight: bold;
}

@media all {
 .page-break { display: block; page-break-before: always; }
}

@media print {
 .page-break { display: block; page-break-before: always; }
}
```

```html
 <div class="chartz">
    <div class="mark_chart">
     <table>
       <tr style="font-weight: bold;"><td rowspan="2" class="head_title"><h1>SUBJECT TITLE</h1></td><td class="txt_rotate">1st Test</td><td class="txt_rotate">2nd Test</td><td class="txt_rotate">Exam Score</td><td class="txt_rotate">Total Score</td><td rowspan="2" class="txt_rotate">Letter Grade</td><td rowspan="2" class="txt_rotate">Subject Position</td><td class="head_title" rowspan="2"><h3>Remark</h3></td></tr>
       <tr style="font-weight: bold;" ><td>10</td><td>20</td><td>70</td><td>100</td></tr>
       <tr><td colspan="8">COGNITIVE REPORT</td></tr>

        <tr>
        <td class="subject">&nbsp;</td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr_green"><strong>&nbsp;</strong></td>
        <td class="txt_colr_red"><strong>&nbsp;</strong></td>
       </tr>
        <tr>
        <td class="subject">&nbsp;</td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr_green"><strong>&nbsp;</strong></td>
        <td class="txt_colr_red"><strong>&nbsp;</strong></td>
       </tr>
        <tr>
        <td class="subject">&nbsp;</td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr_green"><strong>&nbsp;</strong></td>
        <td class="txt_colr_red"><strong>&nbsp;</strong></td>
       </tr>
        <tr>
        <td class="subject">&nbsp;</td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr_green"><strong>&nbsp;</strong></td>
        <td class="txt_colr_red"><strong>&nbsp;</strong></td>
       </tr>
        <tr>
        <td class="subject">&nbsp;</td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr_green"><strong>&nbsp;</strong></td>
        <td class="txt_colr_red"><strong>&nbsp;</strong></td>
       </tr>
        <tr>
        <td class="subject">&nbsp;</td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr_green"><strong>&nbsp;</strong></td>
        <td class="txt_colr_red"><strong>&nbsp;</strong></td>
       </tr>
        <tr>
        <td class="subject">&nbsp;</td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr_green"><strong>&nbsp;</strong></td>
        <td class="txt_colr_red"><strong>&nbsp;</strong></td>
       </tr>
        <tr>
        <td class="subject">&nbsp;</td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr_green"><strong>&nbsp;</strong></td>
        <td class="txt_colr_red"><strong>&nbsp;</strong></td>
       </tr>
        <tr>
        <td class="subject">&nbsp;</td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr"><strong>&nbsp;</strong></td>
        <td class="txt_colr_green"><strong>&nbsp;</strong></td>
        <td class="txt_colr_red"><strong>&nbsp;</strong></td>
       </tr>        
     </table>  
    </div>

    <div class="social_chart">
     <div class="habit_chart">
      <table>
        <tr class="tag_bold head_title">
         <td colspan="2" class="social"> <strong>SOCIAL BEHAVIOUR AND<br> MANIPULATIVE SKILLS</strong>  </td>
        </tr>
        <tr class="tag_bold"><td>Work Habit</td><td>Ratings</td></tr>
        <tr><td>1. Creativity</td><td></td> </tr>
        <tr><td>2. Industrious </td><td></td> </tr>
        <tr><td>3. Work Independently</td><td></td> </tr>
        <tr><td>4. Follow Instructions</td><td></td> </tr>
        <tr><td>5. Neatness/Neat Work</td><td></td> </tr>
        <tr><td>6. Handwriting</td><td></td> </tr>
        <tr><td>7. Verbal Fluency</td><td></td> </tr>
        <tr><td>8. Work with Supervision</td><td></td> </tr>
        <tr><td>9. Class Participation</td><td></td> </tr>
        <tr><td>10. Work on time</td><td></td> </tr> 
      </table>
     </div>

     <div class="behaviour_chart">
      <table>
        <tr class="tag_bold"><td>Behaviour</td><td>Ratings</td></tr>
        <tr><td>1. Honesty</td><td></td> </tr>
        <tr><td>2. Humility </td><td></td> </tr>
        <tr><td>3. Self Control</td><td></td> </tr>
        <tr><td>4. Politeness</td><td></td> </tr>
        <tr><td>5. Teachers Respect</td><td></td> </tr>
        <tr><td>6. Friendliness</td><td></td> </tr>
        <tr><td>7. Punctuality</td><td></td> </tr>
      </table>
     </div>
     <div class="class_chart">
      <table>
        <tr class="tag_bold"><td colspan="2">Class Average</td></tr>
        <tr><td>Highest Class Average</td><td class="txt_colr_green">{{@$highAverage->average}}%</td> </tr>
        <tr><td>Lowest Class Average</td><td class="txt_colr_red">{{@$lowAverage->average}}%</td> </tr>    
      </table>
     </div>
     <div class="resume_chart">
      <table >
        <tr class="tag_bold"><td colspan="2" style="text-align: center;">School Resumes</td></tr>
        <tr><td colspan="2" style="text-align:center;">Sunday, 22 April, 2018</td> </tr>

      </table>
     </div>
    </div>
   </div>
```