как я могу добавить группу lo go в мой вид аккордеона?

Question

Я пытаюсь добавить группу карт go рядом с моим видом на аккордеоне. Я хочу добавить групповую карту visa, MasterCard, and AMEX с использованием SVG, но я пытался добавить 3 изображения подряд, но я не думаю, что это лучший способ сделать это.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="screenPayment">
  <div class="payment">
    <div class="payment-tab">
      <div class="payment-radioGroup">
        <input id="paypal" name="cardType" type="radio" value="paypal">
        <label for="paypal">PayPal</label>
      </div>
      <p>You will be redirected to PayPal to complete your purchase securely.</p>
    </div>
    <div class="payment-tab payment-tab-isActive">
      <div class="payment-radioGroup">
        <input checked="" type="radio" name="cardType" id="creditCart" value="creditCard">
        <label for="creditCart">Add credit card</label>
      </div>
      <img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/visa.svg">
      <img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/mastercard.svg">
      <img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/amex.svg">
      <div class="textInputGroup">
        <label for="nameOnCard">Name on card</label>
        <input id="nameOnCard" name="nameOnCard" required="" type="text">
      </div>
      <div class="textInputGroup">
        <label for="cardNumber">Card number</label>
        <input id="cardNumber" name="cardNumber" placeholder="1234 - 5678 - 9876 - 5432" required="" type="text">
      </div>
      <div class="textInputGroup textInputGroup-halfWidth">
        <label for="expirationDate">Expiration Date</label>
        <input id="expirationDate" name="expirationDate" placeholder="MM / YY" required="" type="text">
      </div>
      <div class="textInputGroup textInputGroup-halfWidthRight">
        <label for="cvc">CVC</label>
        <input id="cvc" name="cvc" placeholder="XXX" required="" type="text">
      </div>
    </div>
  </div>
</div>

Я ожидаю добавить такую ​​группу карт в мой аккордеон

Answer 1

Вы можете добавить их для того же div с «Добавить кредитную карту». Извините, ваш вопрос не ясен. Я не могу правильно понять. А где гармошка? (от Абхишек Пандей)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="screenPayment">
  <div class="payment">
    <div class="payment-tab">
      <div class="payment-radioGroup">
        <input id="paypal" name="cardType" type="radio" value="paypal">
        <label for="paypal">PayPal</label>
      </div>
      <p>You will be redirected to PayPal to complete your purchase securely.</p>
    </div>
    <div class="payment-tab payment-tab-isActive">
      <div class="payment-radioGroup">
            <input checked="" type="radio" name="cardType" id="creditCart" value="creditCard">
          <label for="creditCart">Add credit card</label>
<img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/visa.svg">
          <img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/mastercard.svg">
          <img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/amex.svg">
      </div>
      <div class="textInputGroup">
        <label for="nameOnCard">Name on card</label>
        <input id="nameOnCard" name="nameOnCard" required="" type="text">
      </div>
      <div class="textInputGroup">
        <label for="cardNumber">Card number</label>
        <input id="cardNumber" name="cardNumber" placeholder="1234 - 5678 - 9876 - 5432" required="" type="text">
      </div>
      <div class="textInputGroup textInputGroup-halfWidth">
        <label for="expirationDate">Expiration Date</label>
        <input id="expirationDate" name="expirationDate" placeholder="MM / YY" required="" type="text">
      </div>
      <div class="textInputGroup textInputGroup-halfWidthRight">
        <label for="cvc">CVC</label>
        <input id="cvc" name="cvc" placeholder="XXX" required="" type="text">
      </div>
    </div>
  </div>
</div>

Проверьте следующую секунду фрагмент

<script async src="//jsfiddle.net/g9byLcew/embed/"></script>

Я добавил div для кредитной карты. Этот div имеет абсолютную позицию справа: 0, сверху: 16px. Я удалил кредитные карты CSS как позиция, справа, сверху. Не могли бы вы еще раз протестировать последний фрагмент?