Align HTML items - html

Question

I have one div containing 3 divs.
original
HTML code
.state {
background-color: rgba(233, 234, 237, 0.9);
height: 7vh;
width: 80%;
border-radius: 14px;
margin: 10px 0 15px 80px;
display: flex;
align-items: stretch;
}
.state-main {
text-align: center;
padding-top: 10px;
font-weight: 900;
font-size: 14px;
}
.options {
text-align: right;
margin-bottom: 10px;
}
.owner-image {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
}
<div class="state">
<div class="owner">
<img class="owner-image" src="img/uk.jpg">
</div>
<div class="state-main">
<p class="state-name">PENNSYLVANIA</p>
</div>
<div class="options">
<p id="time"></p>
<button>SEND TROOPS</button>
<button>ATTACK</button>
</div>
</div>

Answer 1

Use flexbox (browser support).
.state {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80px;
background-color: lightgray;
}
.state,
.btns button {
text-transform: uppercase;
}
<div class="state">
<img src="http://placehold.it/150x80/fc0">
<p>
Pennsylvania
</p>
<div class="btns">
<button>Send Troops</button>
<button>Attack</button>
</div>
</div>
**For IE9 and older you'll need to provide a fallback. Whether or not you need to do this depends on target audience.

Answer 2

.State is the div that contains all 3. .state-main is yellow div and should go at the center. .options is green div should go far right. .owner-image is the red div, and should stay at the same place.
Using flex to put the layout into place.
.state {
display: flex;
justify-content: space-between;
}
.state-mail {
text-align: center;
}
<div class="state">
<div class="owner-image">
<img src="http://placehold.it/100x50" />
</div>
<div class="state-main">PENNSYLVANIA</div>
<div class="options"><button>SEND TROOPS</button><button>ATTACK</button></div>
</div>