Html – Flex box inside a box

I’m trying to fit a box inside a box, where the layout changes depending on the screen size e.g. if under 400px.

I’m having trouble at two points:

1. Aligning the inner box to the centre right of the outer box and
2. Using flexboxes to make the inner box into a ‘row’ and fall to the bottom of the outer box on smaller displays

Large display results

Small display results

<p class="inline-block-buttons">
  Text 1
  <a>Text 2</a>
</p>

p {
  border: 1px solid black;
  margin: 2rem 0;
  padding: 0.25rem;
}

a {
  padding: 1rem 2rem;
  border: 1px solid black;
  text-decoration: none;
  margin: 1rem;
  border-radius: 2px;
}

.inline-block-buttons a {
  display: inline-block;
  align-self: right;
}
body {
  margin: 2rem;
}
  @media (max-width: 500px) {
  .inline-block-buttons {
    flex-direction: column;
  }