JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer"> <!-- 父容器 -->
	<div class="inner"> <!-- 子容器 -->
		... <!-- 子容器内部内容 -->
	</div>
    <i>xxx</i>
    
</div>

CSS

.outer { background: #60b99a; 
    line-height: 100px; height: 100px; font-size:0;
    white-space:nowrap;  /*prevent from breaking line */ }
.inner { background: #f1efa5;
    display: inline-block;  vertical-align:middle; /*inline-block hack*/
    height: 70%; width: 80%;
    line-height: normal; font-size: 16px; /*resets*/ }