Is there a way to prevent the purple div from moving to the next line? I want the text to remain flexible and not shift to the next line when the browser is resized. The goal is for the green and purple div to always stay aligned.
You can view my progress so far here: https://jsfiddle.net/Ljcu1hyw/
I apologize if this question seems silly, but I seem to be overlooking something here and would appreciate a second opinion.
Thank you for your assistance!
.marco-maggio {
width: 100%;
height: 100%;
background: #f0f0ef;
box-sizing: border-box;
padding: 80px 0px 100px 0px;
}
.marco-maggio .profile-wrapper {
background: #FFBFBF;
height: 100%;
width: 100%;
max-width: 1130px;
margin:0 auto;
}
.profile {
height: 100%;
width: 340px;
background: #DFFFBF;
padding: 0 20px;
box-sizing: border-box;
display: inline-block;
}
.description {
height: 100%;
width: 100%;
max-width: 780px;
background: #DFBFFF;
display: inline-block;
box-sizing: border-box;
padding: 0 20px;
Float: right;
}
.description h1 {font-family: 'Montserrat', sans-serif; font-size: 34px; font-style: normal; font-weight: 700;}
.description h2 {font-family: 'Playfair Display', serif; font-size: 20px; font-style: italic; margin-top: 5px;}
.description span {font-family: 'Source Sans Pro', sans-serif; font-size: 16px; display: inline-block; margin-top: 50px;}
.profilepic {
width: 300px;
height: 300px;
border-radius: 50%;
background: #80BDFF;
}
.profile-span {
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
margin-top: 50px;
}