Center and end two divs, respectively

How can this be done?

HTML

<div class="main">
  <div class="center">
    <div>A</div>
  </div>
  <div class="right">
    <div>D</div>
  </div>
</div>

CSS

.main {
  border: 2px solid black;
  width: 100%;
}

.center {
  display: inline-block;
}

.right {
  display: inline-block;
}