How to move text next to each other using css? [duplicate] - html

Question

This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
Just a simple css question. Trying to move the price next to the "Quick Shop" text. Basically trying to mirror this design:
.quick_shop_container{
width:100%;
}
.quick_shop{
background-color:white;
display:inline-block;
}
.quick_shop_text{
float:left;
}
.product-item-price{
float:left;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="">
<div class="product-item-price price" data-product-price="">| £51.95</div>
</div>
</button>
</div>
How do I move it?

Answer 1

Although flexbox is always better for 1D design. You can make your div inline-block so items it is inline.
Target it using > div, since you do not have a class. And add float : right to it.
.quick_shop_container{
width:40%;
}
.quick_shop{
background-color:white;
width: 100%;
}
.quick_shop > div{
display:inline-block;
float:right;
}
.quick_shop_text{
float:left;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="">
<div class="product-item-price price" data-product-price="">| £51.95</div>
</div>
</button>
</div>

Answer 2

I am not sure if you are supposed to use float, because of Browser Compatibility etc.. but if not, I guess this would be the solution.
.quick_shop_container{
width:100%;
}
.quick_shop{
background-color:white;
display:inline-block;
display: flex;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="">
<div class="product-item-price price" data-product-price="">| £51.95</div>
</div>
</button>
</div>

Answer 3

Add display:flex to the .quick_shop class
https://jsfiddle.net/k7jr4cwv/

Answer 4

Until you style it differently, a <div> is always a block-level element.
This leads an unstyled <div> to occupy its own vertical space within the document flow, beneath what has gone before.
In this case, we want to override that standard behaviour - so we can tell the <div> elements to display as if they are inline elements:
div[data-price-wrapper],
div[data-product-price] {
display: inline;
}
Working Example:
div[data-price-wrapper],
div[data-product-price] {
display: inline;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="">
<div class="product-item-price price" data-product-price="">| £51.95</div>
</div>
</button>
</div>

Answer 5

You can do it using flexbox.
.quick_shop {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 500px;
padding: 20px;
background-color: white;
border: 2px solid #ccc;
font-size: 30px;
font-family: sans-serif;
}
.product-item-price {
border-left: 2px solid #ccc;
padding-left: 20px;
}
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<span class="product-item-price price">£51.95</span>
</button>

Answer 6

Try this. This will give you the same design without using the "|" character insertion.
.quick_shop_container{
width:200px; // this is container width
}
.quick_shop{
background-color:white;
display:inline-block;
width: 100%;
padding: 0.5rem;
border: solid 0.15rem #ccc;
}
.quick_shop_text{
float:left;
font-weight: bold;
float: left;
}
.product-item-price-wrapper {
}
.product-item-price {
padding-left: 0.5rem;
border-left: solid 0.15rem #ccc;
}
.product-item-price{
float: right;
font-weight: bold;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="" class="product-item-price-wrapper">
<div class="product-item-price price" data-product-price="">£51.95</div>
</div>
</button>
</div>