How to make div at right side of horizontally justified (centered) element. In Tailwind or CSS

Question

How to make this to be exact:-

In the above there is a div justified at the center, and then another div next to it. The width of both the div's changes with animation and buttons.

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="flex justify-center">

  <!-- This is unneeded extra placeholder -->
  <div class=" bg-blue-300 grow"></div> 
  
  <!-- center content whose width is not determined -->
  <div class="py-10 bg-yellow-300">Center Me</div>
  
  <!-- right content whose width is not determined -->
  <div class=" bg-blue-300 grow">
    <div>Needs to be in right of center</div>
    <div>TEXT TEXT TEXT</div>
  </div>
  
</div>

Answer 1

Expand on my comment above. Basically the side div will be position absolute inside the centered div (so it can be side by side and easier to control spacing between the two). Also the draw back is if the centered div too big, it will push the side out of view/create the hoz scroll. Can be fix with some media query though.

* {margin: 0; padding: 0; box-sizing: border-box}

.big_div {
    width: 100vw;
    height: 100vh;
    background-color: lightgreen;
    display: flex;
    align-items: center;
    justify-content: center;
}

.centered_div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    padding: 15px;
    position: relative;
}

.side_div {
    position: absolute;
    top: 0;
    left: calc(100% + 15px);
    width: 150px;
    height: 200px;
    background-color: green;
    padding: 15px;
}

<div class="big_div">
    <div class="centered_div">
        Centered Div
        
        <div class="side_div">
            Side Div
        </div>
    </div>
</div>