title: How to split html page in two equal halfs?
body: <p>I have a wordpress site and I am using the plugin loginpress. So the url of the site is this:</p>
  <pre><code>https://staging.parallelle-economie.community/wp-login.php?redirect_to=https%3A%2F%2Fstaging.parallelle-economie.community%2F&amp;bp-auth=1&amp;action=bpnoaccess
  </code></pre>
  <p>And so I want to have one half of login page and other half the rest. Like this:</p>
  <pre><code>https://i0.wp.com/w3codepen.com/wp-content/uploads/2019/10/login-form-using-html-css.png?resize=1280%2C634&amp;ssl=1
  </code></pre>
  <p>So until now I have in the customised css this:</p>
  <pre><code>
  body.login {
  display:flex;
      background-image: url(https://staging.parallelle-economie.community/wp-content/uploads/2022/03/Hero-Mycells.jpg);
      background-color: #270a4c;
      background-repeat: no-repeat;
      background-position: lerft;
      background-size: cover;
      position: relative;
      /* width: 50%; */
      /* background-size: 50% auto; */
      position: fixed;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background-color: pink;
  }
  
  #login{
  max-height:100%;
  }
  </code></pre>
  <p>So what I have to change?</p>
  <p>Thank you</p>