Centring an icon between text and another icon

I'm trying to get an icon (the play arrow with the ring around it) in the centre of the screen, in between the title ('Random Episodes') and the other icon (the monitor with the + in it).

I have tried too many combinations to remember, let alone list here. If you look at the code snippet below, which is just the header section of the page, you can see what I mean. (The upside down 'T' is just there to mark the centre.) If you remove the /* */ in the #add_show_icon tag in the style section you will see what I want it to look like (as long as your screen size is greater than 590px).
Unfortunately, as you can see, the method I used to get it to look right was to, basically, just increase the width of the icon to match the width of the title (246.3px); this is obviously not a good final solution.

Any help with this would be appreciated as, although it is just for a personal project, I'm hopping it might be a good portfolio/'example of my work' type of project (after a bit... ok, a lot, of tidying up).

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>header test</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>
  <header id="header">
    <h1>Random Episodes</h1>
    <div class="completely_random_outer" onclick="open_random_show_and_episode()">
      <i class="material-icons button_icons ">autorenew</i>
      <i class="material-icons button_icons play_icon">play_arrow</i>
    </div>
    <i id="add_show_icon" class="material-icons button_icons" >add_to_queue</i>
  </header>
  <div id=center_marker>T</div>
</body>

<style>
   :root {
    --all-shows-bg-color: #444
  }
  
  body {
    background-color: dimgrey;
    margin: 0px;
  }
  
  #header {
    display: flex;
    justify-content: space-between;
    background: black;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .completely_random_outer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .completely_random_outer .play_icon {
    position: absolute;
    font-size: 250%;
  }
  
  .completely_random_outer .button_icons {
    opacity: 1;
  }
  
  #add_show_icon {
    opacity: 1;
    /*
    width: 246.3px; 
    display: flex; 
    justify-content: flex-end; 
    */
  }
  
  .button_icons {
    opacity: 0;
    cursor: pointer;
    font-size: 470%;
    z-index: 1;
  }
  
  #center_marker {
    display: flex;
    justify-content: center;
    font-size: 500%;
    font-family: monospace;
    transform: scale(-1);
  }
</style>

</html>

Edit for clarification:
I have tried using justify-content: space-between; The problem with is is that it just equalizes the space between the elements, end to end. As the text is wider then the icon on the other side, it pushes the center icon over a bit, and thus of center for the page as a whole.

problem, center icon is off-center

desired look, having to bodge it by increasing the width of the icon

SOLVED! by @Timor-Kodal
Finished look! Thanks for the help Timor!

<header id="header">
    <div id="container">
        <div class="child"> 
            <h1>Random Episodes</h1>
        </div>
        <div class="child">
            <div class="completely_random_outer" onclick="open_random_show_and_episode()">
                <i class="material-icons button_icons ">autorenew</i>
                <i class="material-icons button_icons play_icon">play_arrow</i>
            </div>
        </div>
        <div class="child">
            <i id="add_show_icon" class="material-icons button_icons" >
                add_to_queue
            </i>
        </div>
    </div>
</header>

    #container {
        display: flex;
    }
    .child {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .child:first-child > h1 { 
        margin-right: auto; 
    }

    .child:last-child  > i { 
        margin-left: auto;  
    }

Solution

Does this help?

.flex-container {
  display: flex;
}
.child {
  flex: 1;
  display: flex;
  justify-content: center;
}

.child:first-child > span { margin-right: auto; }

.child:last-child  > span { margin-left: auto;  }

<div class="flex-container">
  <div class="child"><span>short</span></div>
  <div class="child"><span>centered content</span></div>
  <div class="child"><span>a very very long text section on the right side </span></div>
</div>