P element inside the Div element changes the position of Div

Question

I am trying to keep these two divs on the same line. But whenever I add a P element inside the first Div, it moves to the new line. I have tried assigning display property to "inline-block" to each element, but it doesn't work. Can you please help, I have the following code:

.tile {
  height: 100px;
  width: 100px;
  background-color: rgb(250, 250, 156);
  border: 5px solid red;
  display: inline-block;
  vertical-align:top
}

p {
  display: inline;
  margin:0;
}

<div class="tile">
  <p>Hello</p>
</div>
<div class="tile"></div>

Use `vertical-align`. The two boxes are aligned on the baseline of the text by default. Also, please [validate your HTML](//html5.validator.nu/). — Sebastian Simon, Jun 09 '21 at 10:14
[Duplicate](//google.com/search?q=site%3Astackoverflow.com+css+two+inline-blocks+misaligned+when+text+is+inserted) of [Why my inline-block divs are not aligned when only one of them has text?](/q/13548168/4642212). — Sebastian Simon, Jun 09 '21 at 10:18

score 0 · Answer 1 · answered Jun 09 '21 at 10:18

you can use display flex

  <html>
    <head>
        <title>Experiment</title>
    </head>
    <style>
      .container {
        display: flex
      }
      .tile{
            height:100px;
            width:100px;
            background-color: rgb(250, 250, 156);
            border:5px solid red;
        }

    </style>
    <body>
      <div class="container">
        <div class="tile"><p>Hello</p></div>
        <div class="tile"></div>
      </div>
    </body>
</html>

P element inside the Div element changes the position of Div

1 Answers1