:focus not changing the other element's data

I wanted to make a read-only input visible when another input is in focus. I tried the css, I see no issue, but still it isn't working. Basically, when Username is focused, UsernameLabel display:block. I managed to do it, but by removing Username's already existing focus.

Details:

Read-only Input
Input
If input:focus read-only-input.display:block

#Container {
            height: 75vh;
            width: 100%;
            background-color: rgb(42, 95, 165);
        }

        .UsernameLabel {
            font-size: 30px;
            color: rgb(255, 255, 255);
            height: 30px;
            width: 75%;
            border-radius: 5px;
            text-align: center;
            background-color: rgb(42, 95, 165);
            position: fixed;
            top: 7.5%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            display: none;
        }

        .Username {
            height: 7.5vh;
            width: 75%;
            border-radius: 5vh;
            border: none;
            background-color: #313131;
            position: fixed;
            top: 15%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            color: white;
            text-align: center;
            font-size: 20px;
        }

        .Username:focus{
            width: 90%;
            margin-top: 30px;
        }
        
        .Username:focus .UsernameLabel{
            display: block;
        }

        #Container2 {
            height: 35vh;
            width: 35vh;
            background-color: #1a1a1a;
            border-radius: 20px;
            position: fixed;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        body {
            margin: 0;
        }

        #InverseRadius {
            height: 10vh;
            width: 100%;
            background-color: #1a1a1a;
            border-radius: 50%;
            margin-top: -5vh;
        }

<body bgcolor="#1a1a1a">
    <div id="Container">
        <div id="Container2">
            <input class="UsernameLabel" value="Username" readonly>
            <input type="text" placeholder="Username" class="Username" id="Username">
        </div>
    </div>
    <div id="InverseRadius"></div>
</body>

Solution

try this:

#Container {
            height: 75vh;
            width: 100%;
            background-color: rgb(42, 95, 165);
        }

        .UsernameLabel {
            font-size: 30px;
            color: rgb(255, 255, 255);
            height: 30px;
            width: 75%;
            border-radius: 5px;
            text-align: center;
            background-color: rgb(42, 95, 165);
            position: fixed;
            top: 7.5%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            display: none;
        }

        .Username {
            height: 7.5vh;
            width: 75%;
            border-radius: 5vh;
            border: none;
            background-color: #313131;
            position: fixed;
            top: 15%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s;
            color: white;
            text-align: center;
            font-size: 20px;
        }

        .Username:focus{
            width: 90%;
            margin-top: 30px;
        }
        
        .Username:focus~.UsernameLabel{
            display: block;
        }

        #Container2 {
            height: 35vh;
            width: 35vh;
            background-color: #1a1a1a;
            border-radius: 20px;
            position: fixed;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        body {
            margin: 0;
        }

        #InverseRadius {
            height: 10vh;
            width: 100%;
            background-color: #1a1a1a;
            border-radius: 50%;
            margin-top: -5vh;
        }

<body bgcolor="#1a1a1a">
    <div id="Container">
        <div id="Container2">
            <input type="text" placeholder="Username" class="Username" id="Username">
            <input class="UsernameLabel" value="Username" readonly>
            
        </div>
    </div>
    <div id="InverseRadius"></div>
</body>

explanation:
the SPACE selector occur only if the last is a descendant of the first.
but in your case he is not descendant and you may use ~ or + selector (and inverse their order in the html)
more here