title: Inline two elements and put one elements below the others using flexbox
body: <p>I'm trying to use flexbox in order to make the pop-up of my dialog modal. I followed the examples given by Froggy but I have a little problem that I can't resolve. So I would like to ask some help please.</p>
  
  <p>Here is what I want to do: </p>
  
  <p><a href="https://i.stack.imgur.com/cxYDK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cxYDK.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:host{
    position: absolute;
    top:0;
    left:0;
    background: rgba(0, 0, 0, 0.5);
    height : 100vh;
    width: 100vw;
    z-index: 1000;
    display: flex;
    justify-content:center;
    align-content: center;
    }
  .Modal{
    background: white;
  }
  .LogoImage{
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
    border-radius: 7%;
  }
  .ManagerLayout{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ManagerInfo{
    display: flex;
    flex-flow: column wrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Modal"&gt;
    &lt;div&gt;&lt;h1 class="ManagerTitle"&gt;Managers make you feel better !&lt;/h1&gt;&lt;/div&gt;
    &lt;div class="ManagerLayout"&gt;
      &lt;div class="logo"&gt;&lt;img class="LogoImage" [src] = ""&gt;&lt;/div&gt;
      &lt;div class="ManagerInfo"&gt;
        &lt;div class="ManagerName"&gt;ManagerName&lt;/div&gt;
        &lt;div class="ManagerCible"&gt;ManagerCible&lt;/div&gt;
        &lt;div class="ManagerCost"&gt;ManagerCost&lt;/div&gt;
      &lt;/div&gt;
      &lt;button mat-raised-button id="HireButton" (click)="hireManager(manager)"&gt; Hire !&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="logo"&gt;&lt;img class="LogoImage" [src] = ""&gt;&lt;/div&gt;
      &lt;div class="ManagerInfo"&gt;
        &lt;div class="ManagerName"&gt;ManagerName2&lt;/div&gt;
        &lt;div class="ManagerCible"&gt;ManagerCible2&lt;/div&gt;
        &lt;div class="ManagerCost"&gt;ManagerCost2&lt;/div&gt;
      &lt;/div&gt;
      &lt;button mat-raised-button id="HireButton" (click)="hireManager(manager)"&gt; Hire2 !&lt;/button&gt;
      &lt;div class="ManagerInfo"&gt;
        &lt;div class="ManagerName"&gt;ManagerName3&lt;/div&gt;
        &lt;div class="ManagerCible"&gt;ManagerCible3&lt;/div&gt;
        &lt;div class="ManagerCost"&gt;ManagerCost3&lt;/div&gt;
      &lt;/div&gt;
      &lt;button mat-raised-button id="HireButton" (click)="hireManager(manager)"&gt; Hire3 !&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Like you can see I have little shift on the right for the first container then my rows became columns. I tried to use row-wrap and flex-direction to change it by I can't...</p>
  
  <p>I thank in advance anybody who would take the time to help me. </p>
  
  <p>EDIT: </p>
  
  <p><a href="https://i.stack.imgur.com/vckAU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vckAU.png" alt="enter image description here"></a></p>