JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<div class="group">
  <div class="item"> 
    <label>神奇</label>
    <div>动物在哪里</div>
  </div>
</div>

<div class="group error-group">
  <div class="item"> 
    <label>神奇</label>
    <div>动物在哪里</div>
  </div>
</div>

<div class="group want-group">
  <div class="item"> 
    <label>神奇</label>
    <div>动物在哪里</div>
  </div>
</div>

<div class="container">
  <div class="row">
      <label>神奇</label>
      <div>动物在哪里</div>
  </div>
</div>

CSS

.group{
   margin:20px;
}

.item{
    display:inline-block;
    width:250px;
    height:40px;
    line-height:40px;
    background-color:#FE7D91;
    color:#fff;
    border-radius:3px;
 }
 
.item label{
    float:left;
    width:35%;
    text-align:right;
    font-size:16px;
  }
  
.item label ~div{
    float:left;
    width:65%;
    font-size: 14px;
  }
  
 /* 有希望，却发现希望不美好, 现实太残酷。padding占用了div的宽高了 */
 .error-group label{
     padding-right:10px;
 }
 
 /* 车到山前必有路，柳暗花明又一村 */
  .want-group label{
     box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
     -ms-box-sizing: border-box; /*IE8*/
     padding-right:10px;
 }
 
 
 /* 使用flex */
 
 .container{
   margin:20px;
}

.row{
    display:flex;
    width:250px;
    height:40px;
    align-items:center;
    background-color:#FE7D91;
    color:#fff;
    border-radius:3px;
 }
 
.row label{
    width:35%;
    text-align:right;
    font-size:16px;
    padding-right: 10px;  /*看到这里的padding没*/
  }
  
.row label ~div{
    width:65%;
    font-size: 14px;
  }