html - 根据另一个div动态改变一个div的高度

Question

Small Demo of My situation

我的 CSS

  .left
 {
  width: 30vw;
  border-right: 1px solid;
  min-height: 80vh;
  float: left;
 }

 .right
 {
  min-height: 80vh;
 } 

如何根据右侧 div 更改左侧 div 的高度及其边距？

Answer 1

仅CSS

var str = "Cricket Australia chief executive James Sutherland and Bangladesh Cricket Board president Nazmul Hassan have different opinions over who made the decision to postpone Australia's tour of Bangladesh";
    
    $('.addContent').click(function(){
        $('.right').append(str);
        
    });
$('.addContent').click();

.main {
    display: table;
}
.left
{
    display: table-cell;
    padding-bottom: 20px;
  border-right: 1px solid;
    width: 30vw;
}
.right{
    display: table-cell;
   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="left">
        <input type="button" class="addContent" value="add">
    </div>

<div class="right">
    </div></div>