JSFiddle - React, Tailwind, and code Playground

by dazhizhemu

HTML

<body> 
    <div class="border-box-container">
      <div class="box">这个 div 占据左半部分。</div> 
      <div class="box">这个 div 占据右半部分。</div> 
    </div>
    <div class="content-box-container">
      <div class="box">这个 div 占据左半部分。</div> 
      <div class="box">这个 div 占据右半部分。</div> 
    </div>
</body>

CSS

* {
    font-size: 16px;
}
div.border-box-container {
    height: 5em;
    width: 30em;
    border: 1em solid red;
}
div.content-box-container {
    margin-top: 1.2em;
    height: 5em;
    width: 30em;
    border: 1em solid red;
}
div.border-box-container  div.box { 
    box-sizing:border-box;
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box;
    width:50%; 
    height: 100%;
    border:0.8em solid gray; 
    text-align: center;
    float:left;
    display: flex;
    align-items: center;
    justify-content: center; 
}
div.content-box-container div.box {
    box-sizing:content-box;
    -moz-box-sizing:content-box; 
    -webkit-box-sizing:content-box;
    width:50%; 
    height: 100%;
    border:0.8em solid #8181d2; 
    text-align: center;
    float:left; 
}