How to get paragraph element to next line-CodePudding

I have a div tag followed by a p tag. The p tag doesn't start from a new line instead is inline with div.

<body>
    <div >
        <h2>fd   frgf tfytfy tfytfyf fyfytf xdx fhgg</h2>
        <form action="/" method="POST">
            <div >
               <input type="text" name="address" required="">
               <label>Enter here</label>
               <span></span>
            </div>
            <input type="submit" value="Show Results" name="" >
        </form>
     </div>
     <p>want this p tag right below the div</p>
</body>

CSS code:

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #111;
}
.container{
  position: relative;
  width: 800px;
  padding: 40px;
  background: #151515;
}
.container h2{
  color: #999;
  margin-bottom: 45px;
}
.input-field
{
  position:relative;
  height:40px;
  width:100%;
}
.input-field input[type="text"]
{
  position: absolute;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color:#fff;
  width: 100%;
}
.input-field label
{
  position: absolute;
  top : 0;
  left: 0;
  color: #555;
  pointer-events: none;
  display: block;
  transition: 0.5s;
}
.input-field input[type="text"]:focus   label,
.input-field input[type="text"]:valid   label
{
  transform: translateY(-35px);
  font-size: 14px;
  color: #fff;
  background: #ff006a;
  padding : 2px 6px;
}
.input-field span
{
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  background: #555;
  width: 100%;
  height: 2px;
}
.input-field span:before
{
  content: '';
  position: absolute;
  top : 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00b0ff;
  transform : scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}
.input-field input[type="text"]:focus ~ span:before,
.input-field input[type="text"]:valid ~ span:before
{
  transform : scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}
.btn
{
  margin-top:20px;
  border:none;
  box-shadow: none;
  padding: 10px 25px;
  background: #333;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover
{
  background:#00bcd4;

}

I tried using a break tag between the p tag and div tag and also tried display: block; neither of them worked. What would be the right way of getting the paragraph element below the div element instead of its right side ?

CodePudding user response：

the issue is that you have added a display : flex for the body , so the items inside the body will try to stand in line rather than staying one after another

to solve this issue , remove display:flex from the body

CodePudding user response：

Just simply add the p tag inside the div instead of writing it outside the div...

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #111;
}
.container{
  position: relative;
  width: 800px;
  padding: 40px;
  background: #151515;
}
.container h2{
  color: #999;
  margin-bottom: 45px;
}
.input-field
{
  position:relative;
  height:40px;
  width:100%;
}
.input-field input[type="text"]
{
  position: absolute;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color:#fff;
  width: 100%;
}
.input-field label
{
  position: absolute;
  top : 0;
  left: 0;
  color: #555;
  pointer-events: none;
  display: block;
  transition: 0.5s;
}
.input-field input[type="text"]:focus   label,
.input-field input[type="text"]:valid   label
{
  transform: translateY(-35px);
  font-size: 14px;
  color: #fff;
  background: #ff006a;
  padding : 2px 6px;
}
.input-field span
{
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  background: #555;
  width: 100%;
  height: 2px;
}
.input-field span:before
{
  content: '';
  position: absolute;
  top : 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00b0ff;
  transform : scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}
.input-field input[type="text"]:focus ~ span:before,
.input-field input[type="text"]:valid ~ span:before
{
  transform : scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}
.btn
{
  margin-top:20px;
  border:none;
  box-shadow: none;
  padding: 10px 25px;
  background: #333;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover
{
  background:#00bcd4;

}

<body>
    <div >
        <h2>fd   frgf tfytfy tfytfyf fyfytf xdx fhgg</h2>
        <form action="/" method="POST">
            <div >
               <input type="text" name="address" required="">
               <label>Enter here</label>
               <span></span>
            </div>
            <input type="submit" value="Show Results" name="" >
        </form>
        <p>want this p tag right below the div</p>
     </div>
</body>

CodePudding user response：

just add it on it's own div wait I will update the answer

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #111;
}
.container{
  position: relative;
  width: 800px;
  padding: 40px;
  background: #151515;
}
.container h2{
  color: #999;
  margin-bottom: 45px;
}
.input-field
{
  position:relative;
  height:40px;
  width:100%;
}
.input-field input[type="text"]
{
  position: absolute;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color:#fff;
  width: 100%;
}
.input-field label
{
  position: absolute;
  top : 0;
  left: 0;
  color: #555;
  pointer-events: none;
  display: block;
  transition: 0.5s;
}
.input-field input[type="text"]:focus   label,
.input-field input[type="text"]:valid   label
{
  transform: translateY(-35px);
  font-size: 14px;
  color: #fff;
  background: #ff006a;
  padding : 2px 6px;
}
.input-field span
{
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  background: #555;
  width: 100%;
  height: 2px;
}
.input-field span:before
{
  content: '';
  position: absolute;
  top : 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00b0ff;
  transform : scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}
.input-field input[type="text"]:focus ~ span:before,
.input-field input[type="text"]:valid ~ span:before
{
  transform : scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}
.btn
{
  margin-top:20px;
  border:none;
  box-shadow: none;
  padding: 10px 25px;
  background: #333;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover
{
  background:#00bcd4;

}

<body>
    <div >
        <h2>fd   frgf tfytfy tfytfyf fyfytf xdx fhgg</h2>
        <form action="/" method="POST">
            <div >
               <input type="text" name="address" required="">
               <label>Enter here</label>
               <span></span>
            </div>
            <input type="submit" value="Show Results" name="" >
        </form>
     </div>

     <p>want this p tag right below the div</p>
   
</body>

CodePudding user response：

you can add the p tag inside a div tag if that doesent work then with css make that new div display:block;