displaying a div content side by side

Question

iam using a div contents .This div is repeating number of times showing output as

2 any street basingstoke, United Kingdom, SP49 4ED

2 any street basingstoke, United Kingdom, SP49 4ED

like this . i need a display in side by side rather than displaying below.

.wfte_invoice-main {
    color: #73879C;
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    box-sizing: border-box;
    width: 50%;
    margin: 0px;
}

please give me a solution. Thank you in advance.

Answer 1

according to what I have understand, maybe you can use display: flex property and put your text in a paragraph tag like this:

<div class="your_container">
  <p class="wfte_invoice-main">
    2 any street basingstoke, United Kingdom, SP49 4ED
  </p>
  <p class="wfte_invoice-main">
    2 any street basingstoke, United Kingdom, SP49 4ED
  </p>
  ...
</div>

.your_container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

Link to the codesandbox: CodeSandbox

Answer 2

A div is a block-element and block-elements are displayed below each others by default.

If you want to make them order in a row, just add

display: inline-block

to your div-class "wfte_invoice-main".

Another way would be wrapping a flex-box-container around your two divs.

<div class="wfte_invoice-container">
  <p class="wfte_invoice-main">
    2 any street basingstoke, United Kingdom, SP49 4ED
  </p>
  <p class="wfte_invoice-main">
    2 any street basingstoke, United Kingdom, SP49 4ED
  </p>
</div>

And add the following style:

 .wfte_invoice-container {
  display: flex;
  }

You can edit the look of your container by adding values for justify-content and align-items.