Buttons and Inputs are not flushed when placing together without borders

[Rizzaxc]

Summary

Buttons and Inputs are slightly misaligned when placing together.

Basic example

Motivation

It's a fairly common design

[jjagielka]

Indeed, it is a fairly common design and it's represented in the docs - Input group:

<ButtonGroup >
<Button color="green">OK</Button><Input placeholder="Input"/>
</ButtonGroup>

And I have an impression that elements in such a group are aligned.

[Rizzaxc]

Indeed, it is a fairly common design and it's represented in the docs - Input group:

<ButtonGroup >
<Button color="green">OK</Button><Input placeholder="Input"/>
</ButtonGroup>

And I have an impression that elements in such a group are aligned.

I should've worded it better. I had seen the doc prior to posting. In my particular case, I have each element wrapped with its Label.

<div class="wrapper">
  <div>
    <Label for="myBtn">Btn </Label>
    <MyButton /> // actually a custom component using Button as the style
  </div>
  <div>
    <Label for="myInput">Input </Label>
    <Input />
  </div>
</div>

What's the correct idiom in here?

[shinokada]

You need to use ButtonGroup as @jjagielka stated.