How to stay everything at their size and Place even when zoom

The question is very Gizzy. Don't mind. I did not know how I should have asked the question.

How to make This effect?

On my CODE below:-

<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Facebook</title>
</head>

<body>
  <div id="upper-part">
    <img src="https://cdn.worldvectorlogo.com/logos/facebook-1.svg" alt="Facebook Logo" width="250px" />
    <table>
      <tr>
        <td>Email or Phone</td>
        <td>Password</td>
        <td></td>
      </tr>
      <tr>
        <td><input type="text" /></td>
        <td><input type="password" /></td>
        <td><input type="submit" /></td>
      </tr>
      <tr>
        <td></td>
        <td>Forgotten Password?</td>
        <td></td>
      </tr>
    </table>
  </div>
  <h2>Facebook helps you connect and share with the people in your life.</h2>
  <img src="Images/Facebook-img2.png" alt="We are all connected!" />
  <h1>Create and Account</h1>
  <h2>It's free and always will be.</h2>
  <table>
    <tr>
      <td><input type="text" placeholder="First name" /></td>
      <td><input type="text" placeholder="Surname" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="text" placeholder="Mobile number or email address" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="password" placeholder="New Password" /></td>
    </tr>
  </table>
</body>

</html>

Inside the DIV, That is what I want to change into something like in the picture. I have also added some CSS in another code File which did not work. Like the Form inside Table Got transfered to the next line as I zoomed in.

Solution

Use absolute units for sizes (for example "px")

.wrapper{
  display: flex;
  
  width: 200px; //!

}

.el1{
  background-color: #99a;
  width: 50%;
  height: 30px;
}

.el2{
  background-color: #a99;
  width: 50%;
  height: 30px;
}

<div class="wrapper">
  <div class="el1">
    Some Text
  </div>
  <div class="el2">
    Another Text
  </div>
</div>