<div class="container">
  <div class="payment_details">
    <h1>Payment Information</h1>
    <div class="details_card">
      <div class="name_address">
        <div class="first_lastName">
          <input type="text" placeholder="First Name" />
          <input type="text" placeholder="Last Name" />
        </div>
        <div class="address">
          <input type="text" onkeyup="change()" id="put" placeholder="Address" />
          <input type="number" placeholder="Pincode" />
          <input type="text" placeholder="Country" />
        </div>
      </div>
      <h1>Shipping Details</h1>
      <div class="shipping_card">
        <div class="new_card">
          <h4>Same as personal</h4>
          <p id="output">Bharat House Bombay Samachar Road</p>
          <p>400001</p>
        </div>
        <div class="add_savedcard">
          <h4>Saved Address</h4>
          <p>Lokhandwala Complex, Andheri (west)</p>
          <p>400053</p>
        </div>
      </div>
      <div class="proced_payment">
        <a href="">Procced to payment</a>
      </div>
    </div>
  </div>
  <div class="order_summary">
    <h1>Order Summary</h1>
    <div class="summary_card">
      <div class="card_item">
        <div class="product_img">
          <img src=https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=643&q=80" alt="" />
        </div>
        <div class="product_info">
          <h1>Nike Shoes</h1>
          <p>Lorem Ipsum is simply dummy text.</p>
          <div class="close-btn">
            <i class="fa fa-close"></i>
          </div>
          <div class="product_rate_info">
            <h1>$ 200</h1>
            <span class="pqt-minus">-</span>
            <span class="pqt">1</span>
            <span class="pqt-plus">+</span>
          </div>
        </div>
      </div>
      <div class="card_item">
        <div class="product_img">
          <img src="https://images.unsplash.com/photo-1543512214-318c7553f230?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="" />
        </div>
        <div class="product_info">
          <h1>Amazon Prime</h1>
          <p>Lorem Ipsum is simply dummy text.</p>
          <div class="close-btn">
            <i class="fa fa-close"></i>
          </div>
          <div class="product_rate_info">
            <h1>$ 160</h1>
            <span class="pqt-minus">-</span>
            <span class="pqt">1</span>
            <span class="pqt-plus">+</span>
          </div>
        </div>
      </div>
      <hr />
      <div class="order_price">
        <p>Order summary</p>
        <h4>$400</h4>
      </div>
      <div class="order_service">
        <p>Additional Service</p>
        <h4>$10</h4>
      </div>
      <div class="order_total">
        <p>Total Amount</p>
        <h4>$370</h4>
      </div>
    </div>
  </div>
</div>
<footer>
  <a href="https://www.instagram.com/developer_nikhil27/">FOLLOW ME ON INSTAGRAM <span>@developer_nikhil27</span></a>
</footer>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
}

h1 {
  font-size: 16px;
  margin: 5px;
}
.container {
  width: 100%;
  height: 92vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #f9fafc;
}

/*
Payment Information card
*/
.details_card {
  width: 700px;
  height: 400px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 10px;
  background-color: #fff;
}

/*
Order Summary Card
*/
.summary_card {
  background-color: #fff;
  width: 350px;
  height: 400px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 10px;
}

/*
Order Card Item Card
*/
.card_item {
  display: flex;
  position: relative;
  margin: 10px 0;
}
.close-btn {
  position: absolute;
  right: 10px;
  top: 5px;
}

.card_item .product_img img {
  height: 80px;
  margin-right: 20px;
  width: 70px;
  border-radius: 5px;
}

.product_info h1 {
  font-size: 20px;
  color: #1e212d;
  margin: 5px 0;
}

.product_info p {
  color: #a1a1a1;
  font-size: 14px;
}
.product_rate_info {
  display: flex;
  margin: 5px 0;
  align-items: center;
  justify-content: space-between;
}

/*
cart item + & -
*/
.pqt {
  font-size: 20px;
  line-height: 30px;
  width: 30px;
  text-align: center;
}

.pqt-plus,
.pqt-minus {
  background: #fcfcfc;
  border: none;
  font-size: 20px;
  height: 100%;
  padding: 0 15px;
}
.pqt-plus:hover,
.pqt-minus:hover {
  background: #53b5aa;
  color: #fff;
  cursor: pointer;
}

.pqt-plus {
  line-height: 30px;
}

.pqt-minus {
  line-height: 30px;
}
/*
Order price & total
*/
.order_price,
.order_service,
.order_total {
  display: flex;

  justify-content: space-between;
  padding: 10px;
}
.order_price p,
.order_service p {
  color: #a1a1a1;
}

.order_total p {
  font-weight: 600;
}

/*
Payment Information all input
*/

input {
  outline: 0;
  background: #f2f2f2;
  border-radius: 4px;
  width: 100%;
  border: 0;
  caret-color: #4f5d7e;
  margin: 10px 15px;
  padding: 15px 20px;
  box-sizing: border-box;
  font-size: 14px;
}

.first_lastName,
.shipping_card,
.address {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.new_card {
  width: 100%;
  height: 100px;
  border: 2px solid #53b5aa;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
}

.add_savedcard {
  width: 100%;
  height: 100px;
  border: 2px solid #a1a1a1;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
}
/*
Procced Payment button
*/
.proced_payment a {
  padding: 10px 20px;
  width: 200px;
  border: 2px solid #f5f5f5;
  background-color: #53b5aa;
  color: #000;
  margin-left: 10px;
  cursor: pointer;
  text-decoration: none;
}

footer {
  background-color: #000;
  color: #fff;
  height: 50px;
  text-align: center;
}
footer a {
  text-decoration: none;
  color: #fff;
}