Make width of <a> to have a width equal to its content - css

Question

In the first example below, the id="A_2" has a width equal to its content, while the one second, it id="A_4" has a width equal to its parent. How can I change the second snippet to have width equal to its content?
This snippet is from Google
Play Store Code
#H1_1 {
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: Roboto, UILanguageFont, Arial, sans-serif;
font-size: 28px;
font-weight: 100;
height: 75px;
line-height: 39.2000007629395px;
min-height: 37px;
min-width: 680px;
padding: 5px;
position: relative;
text-align: left;
width: 1088px;
perspective-origin: 544px 37.5px;
transform-origin: 544px 37.5px;
border: 0px none rgb(51, 51, 51);
font: normal normal 100 normal 28px/39.2000007629395px Roboto, UILanguageFont, Arial, sans-serif;
margin: 0px 50px 0px 248px;
outline: rgb(51, 51, 51) none 0px;
padding: 5px;
}/*#H1_1*/
#A_2 {
color: rgb(51, 51, 51);
font-family: Roboto, UILanguageFont, Arial, sans-serif;
font-size: 28px;
font-weight: 100;
line-height: 39.2000007629395px;
text-align: left;
text-decoration: none;
font: normal normal 100 normal 28px/39.2000007629395px Roboto, UILanguageFont, Arial, sans-serif;
}/*#A_2*/
#A_3 {
color: rgb(85, 85, 85);
display: block;
font-family: Roboto, UILanguageFont, Arial, sans-serif;
font-size: 16px;
font-weight: 300;
height: 22px;
line-height: 22.3999996185303px;
padding-bottom: 4px;
text-align: left;
text-decoration: none;
width: 1078px;
font: normal normal 300 normal; 16px/22.3999996185303px Roboto, UILanguageFont, Arial, sans-serif;
padding: 0px 0px 4px;
}
<h1 id="H1_1">
Cricket Fever Get cool games + Cricket apps
</h1>
Here is
My Code
#H1_1 {
display: flex;
height: 60px;
min-height: 37px;
min-width: 680px;
position: relative;
width: 1088px;
align-items: stretch;
justify-content: flex-start;
flex-flow: column nowrap;
font: normal normal bold normal 32px/normal Roboto, UILanguageFont, Arial, sans-serif;
margin: 0px 50px 0px 248px;
padding: 5px;
}/*#H1_1*/
#A_2 {
color: rgb(85, 85, 85);
height: 34px;
text-decoration: none;
align-self: stretch;
border: 0px none rgb(85, 85, 85);
font: normal normal 100 normal 28px/normal Roboto, UILanguageFont, Arial, sans-serif;
}/*#A_2*/
#A_3 {
box-sizing: border-box;
color: rgb(85, 85, 85);
height: 23px;
text-decoration: none;
align-self: stretch;
border: 0px none rgb(85, 85, 85);
font: normal normal 300 normal 16px/normal Roboto, UILanguageFont, Arial, sans-serif;
margin: 3px 0px 0px;
padding: 0px 0px 4px;
}/*#A_3*/
<h1 id="H1_1">
<a id="A_2" href="">Cricket Fever</a> <a id="A_3" href="">Get cool games + Cricket apps</a>
</h1>

Answer 1

If I understand correctly, you want a#A_4 to be as width as it's content... right?
Then remove the display: block from it.
To make the link appear on a new line, simply add a line break to it.
Updated Codepen

Answer 2

The <h1> element has the same width as it content, or bigger if you define it.
There are inline elements and block elements. Inline elements a width equal to its content, the block elements use all the available width.
Since you defined 'A_4' as block, it will use all the available width.
Element <a> is an inline element, so it will have the same width as it content.
Remove the 'display:block' from the <a> elements, and all the fixed width or min-width values. To separate your link for different lines, separate then using <br/> element.
EDIT:
example:
HTML
<h1 id="H1_1">
<a id="A_2" href="">Cricket Fever</a>
<br/>
<a id="A_3" href="">Get cool games + Cricket apps</a>
</h1>
CSS
#H1_1 {
background-color: #000;
margin: 0px 50px 0px 248px;
padding: 5px;
}/*#H1_1*/
#A_2 {
background-color: #666;
color: rgb(85, 85, 85);
height: 34px;
text-decoration: none;
}/*#A_2*/
#A_3 {
background-color: #999;
color: rgb(85, 85, 85);
text-decoration: none;
margin: 3px 0px 0px;
padding: 0px 0px 4px;
}/*#A_3*/