title: Placing components on the right and around other items in React problem
body: <p>Sorry for my atrociously bad title on this post.</p>
  <p>I would like to achieve something like this as my end goal (my figma mockup):
  <a href="https://i.stack.imgur.com/4kntk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4kntk.png" alt="my figma mockup" /></a></p>
  <p>But I don't know how to achieve this as when I call a component on a &quot;page&quot;, it just places the items underneath the navbar like this:
  <a href="https://i.stack.imgur.com/Sty6j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sty6j.png" alt="example of badness" /></a></p>
  <p>(the text like iPad momentos was just for me testing if the components worked and were called correctly)</p>
  <p>I haven't developed all of the components you can see in the mockup (figma), but that shouldn't matter. All I would like to know is with (S)CSS, how you can place different flexboxes or items around each other like in the image below.</p>
  <p>Thanks a lot.</p>
  <p>My code:</p>
  <pre class="lang-js prettyprint-override"><code>// This file is SRDash (you could call it a page if you want)
  
  // Normal Imports
  import React from 'react';
  import CardLink from '../components/CardLink';
  
  // Component Imports
  import SNavbar from '../components/SNavbar'
  import Text from '../components/Text'
  
  // Styling Imports (Global Styles for this Dash)
  import './sradmin.scss'
  
  const SrDash = () =&gt; {
      return ( 
          &lt;div className=&quot;mainContent&quot;&gt;
              &lt;SNavbar /&gt;
              &lt;Text /&gt;
              &lt;CardLink text=&quot;text here&quot; link=&quot;asdfsd&quot; svg=&quot;asdfsdf&quot;/&gt;
          &lt;/div&gt;
      );
  }
  
  export default SrDash;
  </code></pre>
  <p>It's styling:</p>
  <pre class="lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&amp;display=swap');
  
  * {
      margin: 0;
  }
  
  body {
      color: blue;
  }
  </code></pre>
  <p>Navbar SCSS:</p>
  <pre class="lang-css prettyprint-override"><code>body {
      margin: 0
  }
  
  .snavbarcontainer {
      background-color: black;
      min-width: 3.5em;
      max-width: 3.5em;
      height: 100vh;
  
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  
  .icons_ul {
      text-decoration: none;
      list-style-type: none;
      padding: 0;
  }
  
  .icons_ul li {
      margin: 0.5em 0;
  }
  
  .icons_ul {
      justify-content: center;
  }
  
  .toplefticon {
      position: absolute;
      top: 0;
      transform: translateY(50%);
  }
  </code></pre>
  <p>Navbar JSX:</p>
  <pre><code>import React from 'react';
  
  import './navbar.scss';
  
  // SVG Imports
  import topleft from '../assets/toplefticon.svg'
  import IDash from '../assets/dashboard.svg'
  import IDB from '../assets/database.svg'
  import IHand from '../assets/hand.svg'
  import ILookupPupils from '../assets/lookup-pupils.svg'
  import IMAdmins from '../assets/manage-admins.svg'
  import IMUsers from '../assets/manage-users.svg'
  
  const SNavbar = () =&gt; {
      {/* &lt;img className=&quot;testimage&quot; src={topleft} alt=&quot;Testing Logo&quot; /&gt; */}
      return (
          &lt;div className=&quot;snavbarcontainer&quot;&gt;
              
              &lt;div className=&quot;toplefticon&quot;&gt;
                  &lt;a className=&quot;test&quot; href=&quot;#&quot;&gt;&lt;img src={topleft} alt=&quot;Testing Logo&quot; /&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;mainIcons&quot;&gt;
                  &lt;ul className=&quot;icons_ul&quot;&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src={ILookupPupils} alt=&quot;Pupil Lookup&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src={IMUsers} alt=&quot;Manage Users&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src={IHand} alt=&quot;Coming Soon&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src={IMAdmins} alt=&quot;Manage Admins&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src={IDash} alt=&quot;Dashboard&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src={IDB} alt=&quot;Dashboard&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              
          &lt;/div&gt;
      );
  }
  
  export default SNavbar;
  
  </code></pre>
  <p>Thanks again.</p>