JSFiddle - React, Tailwind, and code Playground
HTML
<div style={{height:"72px"}}>
<div style={{width:"18%",display:"inline-block",height:"72px",borderRight:"1px solid", borderRightColor:"rgba(255,255,255,.25)", marginTop:"-2px"}}>
<div style={{textAlign:"center",height:"72px",paddingLeft:"10%"}}>
<table width="100%" height="72px">
<tbody>
<tr>
<td align="left" width="10%"><img src={gender == 'F' ? genderF : genderM}/></td>
<td align="left" className="cusInfo-upper-surname"> {surname} </td>
<td align="right" className="cusInfo-upper-pps"> {pps} </td>
<td align="right" width="10%" className="cusInfo-upper-detail"> <img src={cusDetailPic}/></td>
</tr>
<tr>
<td colSpan="4" align="left"><img src={mRangeImg} /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div style={{width:"67%",height:"100%",display:"inline-block" }}>
<div style={{height:"30px"}}> <a style={{color:"white",fontSize:"20px"}}>計劃續約</a> </div>
<div style={{height:"30px",width:"75%"}}>
<Steps current={stepStatus} size="small">
<Step title={t1} />
<Step title={t2} />
<Step title={t3} />
<Step title={t4} />
</Steps>
</div>
{/* <div style={{height:"25px",textAlign:"center"}}>
{this.showButton()}
</div> */}
</div>
<div...
CSS
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
height: 48px;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
float: left;
}
#colwrap{
overflow:hidden;
background-color: orange;
}
#colCenter {
height: 48px;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
float: right;
}