css实现左右两个div等高

提出问题：

现在有两个div，但是两个div里面内容多少不确定，可能左边多，可能右边多，css要如何设置可以保证左右两边的div等高呢？

解决方案：

1. 每个div使用display:table-cell

2. div的父元素使用display:box

示例代码1：

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       .div1,
       .div2 {
           border: 1px solid red;
           display: table-cell;
       }
   </style>



   <div class="div1">
       div1
       <br>
       <br>
       <br>
   </div>
   <div class="div2">
       div2
   </div>

示例代码2：

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       .box {
           display: -webkit-box;
       }

       .div1,
       .div2 {
           border: 1px solid red;
       }
   </style>



   <div class="box">
       <div class="div1">
           div1
           <br>
           <br>
           <br>
       </div>
       <div class="div2">
           div2
       </div>
   </div>