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%;" class="mainLogo rotate" src="./assets/logo.svg" />
            <h1 class="name first" >Name</h1>
            <p class="undername second" >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%;
}

>Solution :

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 class="flex__container">
  <h1 class="name first" >Name</h1>
  <p class="undername second" >Text I want under name</p>
</div>

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