JSFiddle - React, Tailwind, and code Playground

HTML

When 2nd div is width of 29% 

<div class="outer">
    <div class="first">
    </div>
    <div class="second">
    </div>
</div>

---------------------------------------------------

<br>

When 2nd div is width of 30% 


<div class="outer">
    <div class="firstQ">
    </div>
    <div class="secondQ">
    </div>
</div>

CSS

.outer {
  width: 400px;   
}

.first {
  width: 70%;
  background: red;
  height: 100px;
    display: inline-block;
}
.second {
    width: 29%;
    background: blue;
    height: 100px;
    display: inline-block;
}


.firstQ {
  width: 70%;
  background: orange;
  height: 100px;
  display: inline-block;
}
.secondQ {
    width: 30%;
    background: yellow;
    height: 100px;
    display: inline-block;
}