Two div button position top and bottom how to let them position to left and right-CodePudding

There is two button position top and bottom, how can I make them become left and right like the second image. I am using floating vue so the button will become a div is it possible to make them become left and right position? Sample here >>>

  <div>
    <VDropdown :triggers="['hover']" placement="top-start">
      <button>Test</button>
      <template #popper>
        <div style="padding: 1rem">Help Me</div>
      </template>
    </VDropdown>
    <VDropdown :triggers="['hover']">
      <button>Test 2</button>
      <template #popper>
        <div style="padding: 1rem">Hello t2</div>
      </template>
    </VDropdown>
  </div>

CodePudding user response：

Wrap them in a parent div (I can see you have one already) and add a style of display: flex; you can also add a style of justify-content: center; to keep the elements centered on the page.

Code:

<div  style="display: flex; justify-content:center;">
    <VDropdown :triggers="['hover', 'focus']" placement="top-start">
      <button>Test</button>
      <template #popper>
        <div style="padding: 1rem">Help Me</div>
      </template>
    </VDropdown>
    <VDropdown :triggers="['hover', 'focus']">
      <button>Test 2</button>
      <template #popper>
        <div style="padding: 1rem">Hello t2</div>
      </template>
    </VDropdown>
</div>

I hope this helps!