我需要把所有东西从。屏幕右侧的右下方，图片在左侧。理想情况下，它们应该并排，大小相同，等等。HTML和CSS代码包含在下面。我想这很简单，但我无论如何也想不出来。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.content {
  width: 100vw;
  height: 100vh;
}

.content,
.logo {
  display: flex;
  flex-flow: row wrap;
}


/* Left Side */

.picture {
  background-image: url(picture.jpg);
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  width: 40vw;
}

.logo {
  background-color: rgba(0, 0, 0, .75);
  height: auto;
  position: relative;
  top: 20vh;
  gap: 1vw;
  padding: 15px;
  justify-content: center;
  align-items: center;
}

h1 {
  color: white;
  font-size: 3vw;
}

.odinPic {
  height: 10vh;
}


/* Right Side */

.right {
  width: 60vw;
  background-color: rgb(243, 240, 239);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.left {
  padding-left: 3vw;
}

.dummyText {
  font-weight: 500;
  width: 90%;
  font-size: 1.2rem;
}

.otherText {
  margin: 40px 0 80px;
}


/* Form */

.form {
  background-color: white;
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .75);
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.input {
  display: flex;
  flex-flow: column-wrap;
  width: 40%;
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 50%;
}

.formTitle {
  width: 100%;
  font-size: 1.2rem;
  font-weight: 500;
}

input {
  background-color: white;
  border: 1px solid rgb(66, 66, 66);
  border-radius: 4px;
}

input:focus {
  outline: none;
  border: 2px solid black;
}

button {
  background-color: #596D48;
  color: white;
  font-weight: 700;
  font-size: 1.2em;
  border: 2px solid rgb(66, 66, 66);
  border-radius: 5px;
  padding: 10px 40px;
  margin: 40px 0;
}

button:hover {
  background-color: white;
  color: black;
}

.login {
  display: flex;
  gap: 5px;
}

a {
  text-decoration: none;
  color: #596D48;
  ;
  font-weight: 700;
}

a:hover {
  color: black;
}

<div class="content">
  <div class="picture">
    <div class="logo">
      <img src="odin.png" class="odinPic">
      <h1 class="odin">ODIN</h1>"
    </div>
  </div>
</div>
<div class="right">
  <div class="dummyText left">
    <p>This is not a real online service! You know you need someting like this in your life to help you realizer your deepest dreams.</p>
    <p>Sign up <em>now</em> to get started.</p>
    <p class="otherText">You <em>know</em> you want to.</p>
  </div>
  <form action="#">
    <div class="form left">
      <p class="formTitle">Let's do this!</p>
      <div class="input">
        <label for="first-name">First Name</label>
        <input type="text" name="first-name" id="first-name" required>
      </div>

      <div class="input">
        <label for="last-name">Last Name</label>
        <input type="text" name="last-name" id="last-name" required>
      </div>

      <div class="input">
        <label for="email">Email</label>
        <input type="text" name="email" id="email" required>
      </div>

      <div class="input">
        <label for="phone-number">Phone Number</label>
        <input type="text" name="phone-number" id="phone-number" minlength="10" maxlength="10">
      </div>
    </div>
    <div class="left button"><button type="submit">Join</button></div>
  </form>
  <div class="login left">
    <p>Already have a member?</p><a href="#">Log In</a></div>
</div>