1

I want to place button and H3 side by side. but H3 is appearing under input

<div id="input2">
  <input>
  <h3><button id="input">Add</button></h3>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Bilawal Bhatti
  • 5
  • 2

2 Answers2

0

By using flexbox you can achieve it.

#input2 {
  display: flex;
}
<div id="input2">
  <input> 
  <h3><button id="input">Add</button></h3>
</div>
Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
0

You should put input and button (without h3) inside a div block. Take a look at in the following code:

I suggest you read this article about flex box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#input2 {
    display: flex;
    flex-direction: row;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="t.css">
    <title>Document</title>
</head>
<body>
    <div id="input2">
        <input>
        <button id="input">Add</button>
    </div>
</body>
</html>
Yuri Melo
  • 93
  • 1
  • 3
  • 12