How to create a layout similar to this design with CSS?

I'm trying to create my website to show my work, and I'm creating a "Contact Me" form. Now, I'm focusing on the aspect of it. I made a design of what it should look like, but last time I worked with HTML and CSS was like 8 years ago.

Here is the design:
The design

Here is the actual result:
The result right now

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

/* ---------- Footer ---------- */
#contact {
margin: 10vh auto;
max-width: 1800px;
width: 90%;
padding: 2%;
border-radius: 10px;
}
.contact-highlight {
font-size: 1.5em;
}
.form-element {
display: flex;
flex-direction: column;
align-items: center;
}
.form-component {
font-family: Poppins, Arial, Helvetica, sans-serif;
border-radius: 5px;
border: none;
background-color: #DAD8DD;
color: #0D0221;
width: 25vw;
height: 5vh;
}
.form-text-area {
font-family: Poppins, Arial, Helvetica, sans-serif;
border-radius: 5px;
border: none;
background-color: #DAD8DD;
color: #0D0221;
width: 25vw;
height: 20vh;
}
.form-submit {
font-family: Poppins, Arial, Helvetica, sans-serif;
border-radius: 10px;
border: none;
background-color: #F50056;
color: #ffffff;
font-size: 1em;
width: 10vw;
height: 5vh;
}
.footer-text {
color: #ffffff;
text-align: center;
}

<!-- language: lang-html -->

<!-- The page's footer. -->
<footer>
<!-- The contact infos. -->
<div id="contact" class="white-section">
<!-- Contact text. -->
<p class="highlight contact-highlight">Si vous aimez mes travaux ou souhaitez simplement me contacter,</p>
<p>vous pouvez remplir ce formulaire. Je vous répondrais aussi vite que possible !</p>
<!-- Contact form. -->
<form class="form-element" action="php/contact.php" method="post">
<p>Prénom-Nom<em class="highlight">*</em></p>
<input class="form-component" type="text" name="name" autocomplete="off" required>
<p>Email<em class="highlight">*</em></p>
<input class="form-component" type="email" name="email" autocomplete="off" required>
<p>Objet<em class="highlight">*</em></p>
<input class="form-component" type="text" name="subject" autocomplete="off" required>
<p>Message<em class="highlight">*</em></p>
<textarea class="form-text-area" name="message" autocomplete="off" required></textarea>
<input class="form-submit" type="submit" value="Send">
</form>
</div>
<!-- Footer credits. -->
<p class="footer-text">© Basset Etienne | All rights reserved.</p>
</footer>

<!-- end snippet -->

I already used "CSS grid" to create the Projects part, and I understand how "display: flex" works, but I don't know how to approach this problem. I tried to check online for a way to put elements in a certain order, but I'm afraid it would be a pain to put it responsive.

I would do like this:
Inside the form put a div to be a flexbox container, then put two other divs, one for the name, email and object fields and the other for the message field

display: grid is what you need.

By observation, we can see that our grid have four rows and two columns, as visualized below (not to scale):

┌───────────┬───────────────┐
│ Input:    │ Textarea:     │
│ ┌───────┐ │ ┌───────────┐ │
│ └───────┘ │ │           │ │
├───────────┤ │           │ │
│ Input:    │ │           │ │
│ ┌───────┐ │ │           │ │
│ └───────┘ │ │           │ │
├───────────┤ │           │ │
│ Input:    │ │           │ │
│ ┌───────┐ │ │           │ │
│ └───────┘ │ └───────────┘ │
├───────────┴───────────────┤
│        ┌─────────┐        │
│        │ Button  │        │
│        └─────────┘        │
└───────────────────────────┘

This can be translated to HTML and CSS as (simplified for ease of explanation):

<div id="contact">
  <form class="form-element">

    <!-- Use <label> to mark a field instead of <div> -->
    <label class="form-field">
      <span>Prénom-Nom</span>
      <input type="text" required>
    </label>

    <label class="form-field">
      <span>Email</span>
      <input type="email" required>
    </label>

    <label class="form-field">
      <span>Objet</span>
      <input type="text" required>
    </label>

    <label class="form-field">
      <span>Message</span>
      <textarea name="message" required></textarea>
    </label>

    <div class="form-field">
      <input type="submit" value="Send">
    </div>
  </form>
</div>

.form-element {
  display: grid;
  /* Four rows with the same height. */
  grid-template-rows: repeat(4, 1fr);
  /* The right column is twice as wide as the left one. */
  grid-template-columns: 1fr 2fr;
}

The message box lies on the second column and span 3 rows, while the submit field span both columns. We specify that in our CSS as well:

.form-field:has([name="message"]) {
  grid-row: 1 / span 3; /* Starts at row 1, span 3 rows */
  grid-column: 2; /* Starts at column 2, span 1 by default */
}

.form-field:has([type="submit"]) {
  grid-row: 4; /* Starts at row 4, span 1 by default */
  grid-column: 1 / -1; /* Starts at column 1, span through the last column */
  /* or 1 / 3, 1 / span 2 */
}

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

.form-element {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: 1fr 2fr;
gap: 1em 2em;
}
.form-field:has([name="message"]) {
grid-row: 1 / span 3;
grid-column: 2;
}
.form-field:has([type="submit"]) {
grid-row: 4;
grid-column: 1 / -1;
}
/* Demo only */
#contact {
margin: 1em auto;
width: min(90%, 1000px);
font-family: system-ui;
}
.form-element > .form-field {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.form-element > .form-field > span:has(+ :required)::after {
content: '*';
color: #f20b62;
}
.form-component,
.form-text-area {
border: none;
border-radius: 5px;
background-color: #dad8dd;
color: #0d0221;
}
.form-component,
.form-submit {
padding: 0.5em 1em;
}
.form-text-area {
flex: 1;
padding: 1em;
resize: none;
}
.form-submit {
align-self: center;
border: none;
border-radius: 10px;
background-color: #f50056;
color: #fff;
font-size: 1em;
}

<!-- language: lang-html -->

<footer>
<div id="contact">
<form class="form-element">
<label class="form-field">
<span>Prénom-Nom</span>
<input class="form-component" type="text" autocomplete="off" required>
</label>
<label class="form-field">
<span>Email</span>
<input class="form-component" type="email" autocomplete="off" required>
</label>
<label class="form-field">
<span>Objet</span>
<input class="form-component" type="text" autocomplete="off" required>
</label>
<label class="form-field">
<span>Message</span>
<textarea class="form-text-area" name="message" autocomplete="off" required></textarea>
</label>
<div class="form-field">
<input class="form-submit" type="submit" value="Send">
</div>
</form>
</div>
</footer>

<!-- end snippet -->