JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
      <div class="container">
<div class="row">
        <div class="col-md-6">
          <div class="col-inner">
							<div class="h5 h5cc"><strong>Step 4:</strong> Payment Information</div>
							<hr />
							<fieldset class="form-group">
								<label for="formCreditCardName">Name on Credit Card:</label>
								<input type="text" name="cc[name]" class="form-control form-control-sm" id="formCreditCardName" placeholder="The Name on your Card" required>
							</fieldset>
							<fieldset class="form-group">
								<label for="formCreditCardNumber">Credit Card Number:</label>
								<div class="input-group">
									<input type="tel" name="cc[number]" class="form-control form-control-sm" id="formCreditCardNumber" placeholder="Your Credit Card Number" required>
									<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
								</div>
							</fieldset>
							<div class="row">
								<div class="col-xs-4">
									<fieldset class="form-group">
										<label for="formCreditCardExp">Expiration Date:</label>
										<input type="tel" name="cc[exp]" class="form-control form-control-sm" id="formCreditCardExp" required>
									</fieldset>
								</div>
								<div class="col-xs-4">
									<button type="button" class="btn btn-info btn-sm whatcvc" data-toggle="popover" data-placement="top" data-html="true" title="What is a CVC?" data-content="<img src='https://www.incomrealestate.com/sites/all/themes/Porto/images/cvv.png'>">What is a CVC?</button>
								</div>
								<div class="col-xs-4">
									<fieldset...

CSS

.col-inner {
	background-color: #fff;
	border-bottom-color: rgba(47, 47, 47, .137255);
	border-left-color: #2f2f2f;
	border-right-color: #2f2f2f;
	border-top-color: #2f2f2f;
	color: #2f2f2f;
	border-radius: 7px;
	border-style: none none solid;
	border-width: 0 0 3px;
	padding: 20px 20px;
	margin-bottom:20px;
}
hr {
	border-top-width:2px;
	margin-top:8px;
	margin-bottom:0px;
}
.h5 {
	font-size:18px;
	font-weight: normal;
	margin-top:30px;
}
.form-group {
  margin-bottom: 0px;
}
.form-group > label {
	font-size: 12px;
	padding-left:2px;
	font-weight: bold;
	color: rgba(47, 47, 47, 0.8);
	margin-bottom:6px;
	margin-top:16px;
}
.form-group > .form-control {
	border: 1px solid #A7ABAD;
	padding: 3px 8px 3px 8px;
	box-shadow: rgba(0, 0, 0, 0.047) 0px 0px 0px 3px;
}
.form-group > .input-group > input {
	border: 1px solid #A7ABAD;
	padding: 3px 8px 3px 8px;
}
.form-group > .input-group {
	box-shadow: rgba(0, 0, 0, 0.047) 0px 0px 0px 3px;
}
.form-group > .input-group > .input-group-addon {
	border-top: 1px solid #A7ABAD;
	border-right: 1px solid #A7ABAD;
	border-bottom: 1px solid #A7ABAD;
	padding:0 8px 0 8px;
}

.popover {
	max-width: 490px;
}

JavaScript

$('[data-toggle="popover"]').popover()