css 如何实现右边div高度随着左边div内容的增加，右边div的高度也增加（如何是左边div与右边div高度保持一致）

<template>
  <div class="indexOne">
     <div class="nav_info">

       <div class="left_info">44444444444444444444444446666666666666666666666686666666666666666666666666666666
         666666666666666666666666666666666666666666666666666666666666666666666
         66688888888888888888888888888888888888888888888888888888888888889
         999999999999999999999999999999999999999999999999999999999999999999999
         99999999999999966666666666666666666666666666666666666666666666666666666666666669</div>
       <div class="right_info"></div>
     </div>
  </div>
</template>

<script>
export default {
  name: 'indexOne',
  components: {
   
  },
  created () { 
  
  }
}
</script>
<style lang="scss" scoped>
.indexOne{
   100%;
    height:400px;
    text-align:center;
  .nav_info{
      100%;
        height: auto;
        background-color: aquamarine;
        // display: flex;
        position: relative;
    .left_info{
        30%;
        height:auto;
        background-color: aqua;
        line-height: 25px;
    }
    .right_info{
      position: absolute;
        top: 0;
        right: 0;
         70%;
        height: 100%;
        background-color: bisque;
    }
  }
}
</style>

　　方法2.利用display:table

  

<style lang="scss" scoped>
.indexOne{
   100%;
    height:400px;
    text-align:center;
  .nav_info{
         100%;
        display: table;
         display: table-row;
    .left_info{
      display: table-cell;
      vertical-align: middle;
       30%;
      height:auto;
      background: rosybrown;
      line-height: 30px;
    }
    .right_info{
      display: table-cell;
      vertical-align: middle;
       70%;
      background: greenyellow
    }
  }
}
</style>