How to move text next to each other using css?

Question

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?

Edited your code to a snippet. Always prefer that over normal code. — Tushar Shahi, Jul 26 '21 at 09:20
@Beller Ah got it working thanks to flex box and using justify content to move to start and end for relevant text. Thank you — BruceyBandit, Jul 26 '21 at 09:22
If you look at my answer, you can do it a lot simpler than your layout. — Timothy Alexis Vass, Jul 26 '21 at 09:31

score 3 · Answer 1 · answered Jul 26 '21 at 09:22

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>

score 2 · Accepted Answer · answered Jul 26 '21 at 09:21

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>

score 0 · Answer 3 · answered Jul 26 '21 at 09:21

0

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

answered Jul 26 '21 at 09:21

AtanasB

150
1
9

score 0 · Answer 4 · answered Jul 26 '21 at 09:26

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>

score 0 · Answer 5 · answered Jul 26 '21 at 09:27

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>

score 0 · Answer 6 · answered Jul 26 '21 at 09:28

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>

How to move text next to each other using css?

6 Answers6