Выравнивание меню на CSS и на JS. 2 Вопроса

* {
  vertical-align: table;
}
.class_a1 {
  border: 1px solid #00ffff;
}
.class_l1 {
  display: inline-block;
  border: 1px solid #0000ff;
  float: left;
  padding: 10px;
}
.class_r1 {
  display: inline-block;
  border: 1px solid #00ff00;
  float: right;
  padding: 10px;
}
.class_f0 {
  clear: both;
}
.class_l1_p0 {
  display: inline-block;
  border: 1px solid #ff0000;
  padding: 10px;
}

это ужасный DIV
<br>
<div class="class_a1">

  <div class="class_l1">
    <div class="class_l1_p0">Point1</div>
    <div class="class_l1_p0">Point2</div>
    <div class="class_l1_p0">Point3</div>
    <div class="class_l1_p0">Point4</div>
    <div class="class_l1_p0">Point5</div>
    <div class="class_l1_p0">Point1</div>
    <div class="class_l1_p0">Point2</div>
    <div class="class_l1_p0">Point3</div>
    <div class="class_l1_p0">Point4</div>
    <div class="class_l1_p0">Point5</div>
    <div class="class_l1_p0">Point1</div>
    <div class="class_l1_p0">Point2</div>
    <div class="class_l1_p0">Point3</div>
    <div class="class_l1_p0">Point4</div>
    <div class="class_l1_p0">Point5</div>
    <div class="class_l1_p0">Point1</div>
    <div class="class_l1_p0">Point2</div>
    <div class="class_l1_p0">Point3</div>
    <div class="class_l1_p0">Point4</div>
    <div class="class_l1_p0">Point5</div>
  </div>
  <div class="class_r1">RIGHT</div>
  <div class="class_f0"></div>

</div>

<br>
<br>это нормальная TABLE
<br>

<table class="class_a1">
  <tr>
    <td>
      <div class="class_l1">
        <div class="class_l1_p0">Point1</div>
        <div class="class_l1_p0">Point2</div>
        <div class="class_l1_p0">Point3</div>
        <div class="class_l1_p0">Point4</div>
        <div class="class_l1_p0">Point5</div>
        <div class="class_l1_p0">Point1</div>
        <div class="class_l1_p0">Point2</div>
        <div class="class_l1_p0">Point3</div>
        <div class="class_l1_p0">Point4</div>
        <div class="class_l1_p0">Point5</div>
        <div class="class_l1_p0">Point1</div>
        <div class="class_l1_p0">Point2</div>
        <div class="class_l1_p0">Point3</div>
        <div class="class_l1_p0">Point4</div>
        <div class="class_l1_p0">Point5</div>
        <div class="class_l1_p0">Point1</div>
        <div class="class_l1_p0">Point2</div>
        <div class="class_l1_p0">Point3</div>
        <div class="class_l1_p0">Point4</div>
        <div class="class_l1_p0">Point5</div>
      </div>
    </td>
    <td>
      <div class="class_r1">RIGHT</div>
    </td>
  </tr>
</table>