Aligning div within flex row

Issue

I cannot for the life of me get this to work. I want one item in the middle of the parent div and one item to the far right (end) of the parent div, each on the same row.

With my efforts, they either are both in the middle or on separate rows.

https://codepen.io/kiggs1881/pen/KKZWwBw

<div class="parent">
  <div class="one">Items</div>
  <div class="one">Items</div>
</div>


.parent {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  margin: auto;
  max-width: 600px;
 }

.one {
  display: inline-flex;
  justify-content: center;
}

.two {
  display: inline-flex; 
 justify-content: end;
}

Aligning in css is my greatest weakness.

Solution

Here you go. I advise you to study up on flexbox so that you can see how you were using it incorrectly. You apply the flex attribute on a parent element, it is not needed on the child elements. The guide I have linked should help you.

.parent {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 600px;
}

.parent > div {
  margin-left: auto;
}

<div id="q-app">
  <div class="parent">
    <div>Items</div>
    <div>Items</div>
  </div>
</div>

Answered By - Stephen M Irving