title: CSS: place content so that second child is centered
body: <p>Is there a way to place the content of a container such that it is the second element that appears to be centered, instead of simply centering all children?</p>
  <p>So that in my example there would be 30px before the sidebar and 50px after the main-content, instead of having 40px on each side.</p>
  <p>I can't just use absolute positioning, as I in the case that the main-content is to large, still want to be able to see the sidebar.</p>
  <p>The point is that I have a sidebar, that isn't always visible, and when toggling it on, I do not want it to push the main-content, if there actually is room for it.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class MyComponent extends React.Component {
      render() {
          return (
              &lt;div className="wrapper"&gt;
                  &lt;div className="sidebar" /&gt;
                  &lt;div className="main-content" /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  // Render it
  ReactDOM.render(
      &lt;MyComponent /&gt;,
      document.getElementById("root")
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    background: black;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 500px;
  }
  
  .sidebar {
   background: red;
   height: 100%;
   width: 20px;
   flex-shrink: 0;
  }
  
  .main-content {
    background: blue;
    height: 100%;
    width: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>