How to get a line break for text pulled randomly from a javascript array const

I'm creating a simple webpage tool for language education that randomly selects a question from a javascript array const, but the longer questions are cut off, especially for mobile. How can I get a line break for these longer text questions? I've tried adding breaks inside the array, and I've tried adding css line breaks for the input and divs, but nothing works.

    <style>
    .button {
      background-color: #094997;
      border-radius: 12px;
      border: none;
      color: white;
      padding: 12px 20px;
      text-align: center;
      text-decoration: none;
      font-size: 24px;
      width: 200px;
    }
    input
    {
        font-size:22px;
        padding: 50px 50px;
        text-align: center;
        width: 200px;
        height: 250px;
    }
    .questionsdiv {
        text-align: center; 
    }

    </style>


    <div class="questionsdiv">
    <input type="text" "randomquestion"="" id="randomquestion">
    <br><br>
      <button class="button" onclick="findquestion();" type="randomquestion">Random Question</button>
    </div>


    <script>

    const question = ["How old are you?","Where do you go on Saturdays?","Do you have any brothers or sisters?","How many books do you own?","Who is your favorite music artist lately?","Do you like Jazz music?","Have you ever traveled outside of Japan?","Do you want to live in the countryside or in the city when you are older and have a family?",];

    function findquestion() {
      let randomIndex = Math.floor(Math.random() * question.length);
      document.getElementById("randomquestion").setAttribute("value", question[randomIndex]);
    }

    </script>