title: Position child <div> left or right relative to parent <div> depending on its screen position
body: <p>I´m bulding a menu structure that will open a submenu on mouse hover. The submenu normally opens on the right side of the menu item.</p>
  
  <p>My problem occurs when the menu is positioned at the right side of the screen, where opening the submenu will not show the full text of options, as it will be going out of screen.</p>
  
  <p>I need a way to solve that by choosing to open on left or right depending on the position on the screen, or the space left for the submenu.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;h1&gt;
   Left Menu
  &lt;/h1&gt;
  &lt;div class='menu-container'&gt;
    &lt;ul&gt;
      &lt;li class='option'&gt;
        Option 1
        &lt;div class='submenu-container'&gt;
           &lt;ul&gt;
              &lt;li&gt;Submenu option 1&lt;/li&gt;
              &lt;li&gt;Submenu option 2&lt;/li&gt;
              &lt;li&gt;Submenu option 3&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/div&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;h1&gt;
   Right Menu
  &lt;/h1&gt;
  &lt;div class='menu-container menu-right'&gt;
    &lt;ul&gt;
      &lt;li class='option'&gt;
        Option 1
        &lt;div class='submenu-container'&gt;
           &lt;ul&gt;
              &lt;li&gt;Submenu option 1&lt;/li&gt;
              &lt;li&gt;Submenu option 2&lt;/li&gt;
              &lt;li&gt;Submenu option 3&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/div&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.menu-container { 
     display: inline-block;
     background-color: grey;
     width: 100px;
     height: 50px;
     text-align: center;
  }
  
  .menu-container li {
    list-style: none;
  }
  
  .menu-container ul {
    text-decoration: none;
    padding: 0px;
  }
  
  .option {
    display: inline-block;
    position: relative;
    background-color: white;
  }
  
  .submenu-container { 
     display: inline-block;
     position: absolute;
     background-color: red;
     white-space: nowrap;
     width: auto;
     height: auto;
     text-align: center;
     visibility: hidden;
  }
  
  .option:hover .submenu-container {
    visibility: visible;
  }
  
  .menu-right {
    float: right;
  }
  </code></pre>
  
  <p>I had setup a <a href="https://jsfiddle.net/qjnkzh6b/2/" rel="nofollow noreferrer">fiddle case here.</a></p>
  
  <p>PS: The solution shall not use JQuery as I´m using ReactJS for the final use case.</p>