If every Extra-field has an ID attributed to itself, then you can use a little bit of CSS to do so.
/* Allow this rework only if screen is bigger than 1050px for responsiveness on smaller devices, and avoid other responsive/mobile devices headaches */
@media (min-width: 1050px) {
tr#userfield-4 {
position: absolute; /* Makes the element absolute positioned */
top: -13rem; /* sets the element's position from top. It has to be a negative valute because it's inside a relative positioned parent */
left: 24rem; /* sets element's position from left */
max-width: 390px; /* atribute a max-width so it doesn't overlap other elements of the profile cover. Such as favorite button, etc */
border-bottom: none; /* removes border bottom for aestethics */
}
tr#userfield-4 td.qa-form-wide-data {
display: block; /* allow the td element to be scrolled */
max-height: 90px; /* set a max-height so it doens't overlap other elements of the profile page, and stays contained in the user cover */
overflow-y: auto; /* allows scroll for the designated section */
}
/* rest of your styles here */
}
There's a lot of things to consider and have in mind while doing this. Concerning about space wise, how much content users write on their about section, which is why I already implemented those values on my answer for allowance to scroll that About section in case texts are way to big to fit that User Cover section.
The social links will be to big to fit where you want them to be located, so I would suggest rework them into Social icons instead of full links, but that would require writing a function to convert the links into icons.
And so on...
So I would suggest hiring a developer to properly move those items into that section, convert the links into icons, and have in mind all the variables and responsiveness that comes with this rework. Because this is more work than it appears on your image xD
