JSFiddle - React, Tailwind, and code Playground

HTML

<article>
  <div id="article_right">
    <h2>Contact Us!</h2>
    <form id="contact_form">
      <div class="input-box">
        <label for="contact_name">Full name:</label>
        <input type="text" id="contact_name" name="contact_name" placeholder="Name">
      </div>
      <div class="input-box">
        <label for="contact_phone">Mobile number:</label>
        <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
      </div>
      <div class="input-box">
        <label for="contact_email">Email address:</label>
        <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
      </div>
      <div class="input-box">
        <label for="contact_message">Message:</label>
        <textarea rows="4" cols="40" id="contact_message" name="contact+message" style="resize: none"></textarea>
      </div>
      <div class="button">
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</article>

CSS

article {
    display: flex;
    flex: 3;
    background-color: transparent;
}

#article_left {
    flex: 1;
    align-content: center;
    margin-right: auto;
    background-color: aqua;
}

#article_right {
    flex: 1;
    align-content: center;
    justify-content: center;
    padding-bottom: 5px;
    background-color: transparent;
    margin-left: auto;
}

.cta {
    flex: 30;
    border: 1px solid black;
    border-radius: 5px;
    margin: 25px;
    padding-left: 5px;
}

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 50%;
}


.input-box {
    padding-right: 5px;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

label {
    width: 45%;
    padding-right: 5px;
    text-align: right;
}

input, textarea {
    width: 150%;
}