How to position one element under another Buefy navbar-CodePudding

I have problem in positioning two elements below each other in Buefy-Vue. Currently it works, but if I resize website it breaks because name is set as static. How do I make this responsive? Thank you

Code:

<img style="margin-left: 20%;"  src="./assets/logo.svg" />
            <h1  >Name</h1>
            <p  >Text I want under name</p>
CSS:
.first{
     width:12%;
     height:100px;
     position:absolute; //Due to this my page breaks if i resize it.
     margin-left: 28%;
     margin-top: 0.5%;
 }
.second{
    width:15%;
    height:50px;
    position: relative;
    top: 65px;
    margin-left: 0%;
}

CodePudding user response：

Never put fixed height and width, that breaks your responsive design

put them in a div for using flex box

.flex__container {
  display: flex;
  flex-direction: column;
}

<div >
  <h1  >Name</h1>
  <p  >Text I want under name</p>
</div>

you can play with the font size and padding as you want.