JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

    <p>No padding</p>

    <div class="flexbox">
        <div class="flexbox-item">Item One</div>
        <div class="flexbox-item">Item Two</div>
    </div>
    
    <p>No padding with box-sizing:corder-box</p>
    
    <div class="flexbox">
        <div class="flexbox-item has-padding">Item One</div>
        <div class="flexbox-item has-padding">Item Two</div>
    </div>
    
    <p>No padding with box-sizing:bontent-box</p>
    
    <div class="flexbox">
        <div class="flexbox-item has-padding is-border-box">Item One</div>
        <div class="flexbox-item has-padding is-border-box">Item Two</div>
    </div>

</div>

CSS

.container {
  background-color: #eee;    
  margin: 50px;  
  width: 400px;    
}

.flexbox {
  display: -webkit-flexbox;
}
.flexbox-item {
  background-color: #ffc;
  width: -webkit-flex(0 0 50%);
}
.flexbox-item:nth-child(2n) {
  background-color: #fcf;
}
.has-padding {
  padding: 1em;
}
.is-border-box {
  box-sizing: border-box;    
}