نمایش متن بیشتر با css-javacript

سلام وقت بخیر من یه متنی دارم به شکل زیر
ستون اول ستون دوم
متن1 متن11
متن2 متن22
متن3 متن33
متن4 متن44
من میخوام با استفاده از css و javascript دو سطر اول رو نشون بدم بعد با کلیک رو یه دکمه دیگه بقیه متن ها نمایش داده بشه یا دوباره پنهان بشه.
اومدم کد زیر رو استفاده کردم ولی موقع باز شدن ستنو های دوم میره زیر ستون های اول. البته وقتی کد رو اعمال نمیکنم درست نشون میده.

<style>

            #text{
                display:none;
            }
            .btn-container{
                margin: auto;
                height:44px;
                width:166.23px;
        </style>
$("#toggle").click(function() {
            var elem = $("#toggle").text();
            if (elem == "نمایش بیشتر") {
                //Stuff to do when btn is in the read more state
                $("#toggle").text("نمایش کمتر");
                $("#text").slideDown();
            } else {
                //Stuff to do when btn is in the read less state
                $("#toggle").text("نمایش بیشتر");
                $("#text").slideUp();
            }
        });

<div class="row" >
        <div class="text-center">

            <div class="row col-6">
                <b>ستون اول:</b>
                <span>متن1</span>
            </div>
            <div class="row col-6">
                <b> ستون دوم:</b>
                <span>متن11</span>
            </div>
        </div>
        <div id="text" class="text-center">
                <div class="row col-6">
                     <span>متن2</span>
                    <span>متن3</span>
                    <span>متن4</span>
                </div>
                <div class="row col-6">
                    <span>متن22</span>
                    <span>متن33</span>
                    <span>متن44</span>
                </div>

        </div>
    <div class="btn-container">
        <button id="toggle">نمایش بیشتر</button>
    </div>
</div>