Display text below price - html

Question

If you visit this link, you can see below image at the center of the page:
On this site, if you mouse over currency symbol present on top right of window, you can see drop down options, once you change a dropdown option, you can see "Usually Delivered in 3-5 business days" text next to price - I want this text below the Price, as in the next image:
This is the CSS I am using and, it doesn't matter how I try, can't get the desired result. Can someone please have an advice for me? Thank you.
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}

Answer 1

on
.price-info
Take off
max-width: 31%;
So that it takes up the entire line

Answer 2

Try taking the float:left off of your p tag. That should fix a few issues on your page and might fix the issue you're having with the text displaying in the wrong area.
You should probably also add some html and css to your question. Without it it makes it a hassle to answer.

Answer 3

$(document).ready(function() {
$('.qty-btn').click(function(){
if($('.qty').val() > 0)
{
$('.deliveryMsg').text('Usually Delivered in 3-5 days.');
}else {
alert("Qty must be greater than 0");
}
});
});
body {
background: silver;
}
.section {
height: 400px;
width: 500px;
margin-bottom: 20px;
background: #FFFFFF;
margin-left: 100px;
padding: 10px;
}
/* used for demo purposes */
.product-img {
background: silver;
opacity: 0.5;
height: 150px;
width: 150px;
/* center the img within the col */
display: block;
margin: auto;
}
.col-left {
width: 40%;
}
.col-right {
float: right;
margin-top:-165px;
text-align: left;
width: 60%;
}
.title {
font-weight: bold;
}
.price {
margin-top: -5px;
margin-bottom: -5px;
color: blue;
}
input[type="text"] {
width: 50px;
}
span {
font-size: small;
font-weight: bold;
}
input[type="button"] {
background: orange;
color: #FFFFFF;
}
.qty {
width: 20px !important;
}
.wishlist {
width: 130px !important;
}
.deliveryMsg {
font-weight: bold;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<div class="col-left">
<div class="product-img"></div>
</div>
<div class="col-right">
<p class="title" >Golden Waves Marble Texture Apple IPhone 4 Phone Case</p>
<hr />
<ul>
<li>Device: Apple iPhone 4</li>
<li>Design: Marbles</li>
<li>Material: Polycarbonate Hard Case</li>
</ul>
<hr />
<h3 class="price">499.00</h3>
<hr />
<form>
<span>Check Delivery Availability <input type="text" placeholder="Enter PIN Code" /> <input type="button" value="CHECK" /></span>
<br /><br />
<span>Qty: <input class="qty" type="text" /> <input class="qty-btn" type="button" value="ADD TO CART" /> <input class="wishlist" type="text" placeholder="SAVE TO WISHLIST" /></span>
<br /><br />
<span class="deliveryMsg"></span>
</form>
</div>
</div>
<div class="section">
<h2>Product Description</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
Hope that helps!