Issue with 3 line text next to a div - html

Question

So basically, I want to have 3 lines of text next to a <div>, like this (photoshop mockup):
This is my structure so far:
.gd-content .gd-c-match.in-match .gd-c-match-tutorial {
margin-top: -5px;
width: 100%;
height: 99px;
background-color: rgba(0, 0, 0, 0.66);
padding-top: 24px;
padding-bottom: 18px;
text-align: center;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section {
height: 57px;
width: 290px;
text-align: left;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title .subtitle {
display: block;
font-weight: 400;
color: #494949;
font-size: 14px;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .gd-c-tutorial-square {
display: inline-block;
text-align: center;
padding-top: 19px;
padding-right: 3px;
line-height: 17px;
font-family: 'Uni Sans';
font-weight: bold;
font-size: 24px;
color: white;
height: 100%;
width: 57px;
background-image: url('../../img/gd_content_match_tutorial_square.png');
}
<div class="gd-content">
<div class="gd-c-match in-match">
<div class="gd-c-match-tutorial">
<div class="gd-c-tutorial-section">
<div class="gd-c-tutorial-square">1</div><span class="title">Contact Opponent
<span class="subtitle">Add the other player</span></span>
</div>
</div>
</div>
</div>
And it works... for 2 lines.
But as soon as I get a linebreak (because of the text being too long - which is supposed to happen) it just breaks the whole thing:
Any suggestions on what to do?

Answer 1

Set the width of .title to 70%
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
width:70%;
}
Hope this helps..Tested by me..
.gd-content .gd-c-match.in-match .gd-c-match-tutorial {
margin-top: -5px;
width: 100%;
height: 99px;
background-color: rgba(0, 0, 0, 0.66);
padding-top: 24px;
padding-bottom: 18px;
text-align: center;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section {
height: 57px;
width: 290px;
text-align: left;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
width:70%;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title .subtitle {
display: block;
font-weight: 400;
color: #494949;
font-size: 14px;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .gd-c-tutorial-square {
display: inline-block;
text-align: center;
padding-top: 19px;
padding-right: 3px;
line-height: 17px;
font-family: 'Uni Sans';
font-weight: bold;
font-size: 24px;
color: white;
float: left;
height: 100%;
width: 57px;
background-image: url('../../img/gd_content_match_tutorial_square.png');
}
<div class="gd-content">
<div class="gd-c-match in-match">
<div class="gd-c-match-tutorial">
<div class="gd-c-tutorial-section">
<div class="gd-c-tutorial-square">1</div><span class="title">Contact Opponent
<span class="subtitle">Add the other player ingame and form a party</span></span>
</div>
</div>
</div>
</div>