JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wpcf7" id="wpcf7-f29-o1" lang="en-US" dir="ltr">
    <div class="screen-reader-response"></div>
    <form name="" action="/#wpcf7-f29-o1" method="post" class="wpcf7-form" novalidate="novalidate">

    <div class="appointment-field-name">Name</div>
    <div class="appointment-field-input"><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></div>
    <div><div class="appointment-field-name">Service</div>
        <div class="appointment-field-input"><span class="wpcf7-form-control-wrap your-service"><input type="text" name="your-service" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></div></div>

</form></div>

CSS

.wpcf7 {
    margin: 0;
    padding: 0;
}

.appointment-field-name {
    padding: 9px 0px;
    margin-bottom: 20px;
    text-align: center;
    color: #ffffff;
    background-color: #002d80;
    font-size: 142.86%;
    width: 240px;
    display: inline-block;
    vertical-align: top;
}

.appointment-field-input {
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.wpcf7-text {
    padding: 11px 20px;
    background-color: #D5DFF2;
    font-size: 120%;
    width: 100%;
}

input { border: 0; }

span.wpcf7-form-control-wrap {
position: relative;
}