First Child ignores width and height

I have a really simple angular project with html and scss code. In a container I have 2 objects that I position using flexbox. Everything worked fine with the second object, but the first one just does not work.

Heres my HTML:

<div class="Player">
<p id="Player"> Test </p>
<input class="lineTwo">
<button class="lineTwo">Test</button>
</div>


and heres my scss:

.Player {
position: relative;
width: 80%;
margin: auto;
p {
border: 1px solid rgba($color: #000000, $alpha: 0.3);
font-size: 20px;
padding: 16px;
height: 500px;
}

.lineTwo {
font-size: 15px;
display: flex;
position: absolute;
&:first-child {
left: 0;
width: 50%;
}
&:last-child {
right: 0;
justify-content: center;
width: 50%;
}
}
}


I want both the Input and the button to have a width, but I do not want both to have the same with. If I write it like this:

.lineTwo {
font-size: 15px;
display: flex;
position: absolute;
width: 50%;
&:first-child {
left: 0;
}
&:last-child {
right: 0;
justify-content: center;
}
}
}


...it works just fine and both have a width of 50%, of their parent (except the input is a little bit wider, if you know a solution for this I also appreciate the help).

As I said I dont want both to have the same width so I tried it with the first code but the first child (the Input) does not change. The weird thing is that the button works just fine and if I give him a value like this: width: 75%; it works.

There is no error and I also can not change the height of the Input. It feels like I can't change him at all. If I give the input another tag and try to use this tag with .tag for the &:first-child, still no change.

I am sorry if there are any mistakes in my text I am not a native speaker and thank you for your help in advance.

Continue reading...