JSFiddle - React, Tailwind, and code Playground

HTML

<div class="payment-container">
  <form action="/payment" method="post">
    <div class="payment-customer-container fadeInBottom" id="payment-customer-container-address">
      <div class="payment-customer-header">
        test
      </div>

      <div class="payment-customer-body">
        <div class="payment-customer-input-container">
          <label class="payment-customer-label">test:</label>
          <select class="payment-customer-input" id="payment-customer-select-city" name="payment-customer-select-city">
            <option value="" disabled selected>test</option>
            <option value="test">
              test
            </option>
            <option value="test">
              test
            </option>
            <option value="test">
              test
            </option>
          </select>
        </div>
        <div class="payment-customer-input-container">
          <label class="payment-customer-label">test:</label>
          <input type="text" class="payment-customer-input" placeholder="test" id="customer-address" name="customer-address" />
        </div>

        <div class="payment-customer-input-container" style="margin-top: 0.5vh;">
          <label class="payment-customer-label"></label>
          <div class="payment-customer-city-results-container">
            <div class="payment-customer-city-result">
              <span class="payment-customer-city-result-chevron"><i class="fas fa-chevron-left" ></i></span>
              <span>test</span>
            </div>

          </div>
        </div>
      </div>
    </div>

  </form>
</div>

CSS

.payment-customer-container {
  width: 40vw;
  padding: 1rem;
  background-color: hsl(0, 0%, 97%);
  border-radius: 0.5rem;
  margin-left: 30vw;
}

.payment-customer-header {
  font-family: 'Heebo-Regular';
  font-size: 1.5rem;
  ;
  text-align: center;
}

.payment-customer-body {
  width: 100%;
  margin-top: 5vh;
}

.payment-customer-input-container {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-top: 3vh;
  align-items: center;
}

.payment-customer-label {
  flex: 2;
  padding: 1rem;
  font-family: 'heebo-light';
  font-size: 1.2rem;
  text-align: right;
  direction: rtl;
}

.payment-customer-input {
  flex: 3;
  direction: rtl;
  text-align: right;
  height: 4vh;
  border: none;
  border-bottom: 2px solid #888;
  background-color: hsl(0, 0%, 97%);
}

.payment-customer-input:focus {
  outline: none;
}

.payment-customer-input::placeholder {
  font-family: 'heebo-light';
}

.payment-customer-input:-ms-input-placeholder {
  font-family: 'heebo-light';
}

.payment-customer::-ms-input-placeholder {
  font-family: 'heebo-light';
}

.payment-customer-input::-moz-placeholder {
  font-family: 'heebo-light';
}

.payment-customer-city-results-container {
  flex: 3;
  display: flex;
  flex-direction: column;
}

.payment-customer-city-result {
  height: 5vh;
  line-height: calc(5vh - 1rem);
  background-color: white;
  padding: 0.5rem;
  margin-top: 10px;
  text-align: right;
  font-family: 'heebo-light';
  font-size: 1rem;
  cursor: pointer;
}

.payment-customer-city-result-chevron {
  position: absolute;
  left: 2vw;
}

.payment-customer-container {
  margin-top: 8.5vh;
  height: 80vh;
  justify-content: center;
  align-items: center;
}