I faced an issue when trying to create a row, so I improvised with the following setup. However, I actually need a proper row layout for both the Google button and telephone number button.
Here are my CSS snippets:
.google-button {
color: white;
border: none;
width: 110px;
height: 40px;
border-radius: 3%;
top: -10px;
left: 5px;
position: relative;
}
.alternative-sign-in-buttons {
position: relative;
margin-right: 5px;
}
.telephone-number-btn {
width: 41%;
height: 50.3px;
position: absolute;
margin-left: 15px;
left: 61%;
bottom: 18%;
}
.deneme {
font-size: 14px;
}
And here is how I structured the HTML:
<div className="alternative-sign-in-buttons">
<GoogleAuth />
<button className="telephone-number-btn">
<p className="deneme">Sign in with telephone number</p>
</button>
</div>
Click on this link to view the image of the codes: https://i.sstatic.net/rDzyW.png