Slickスライダーに停止ボタンを追加し、そのボタンをslick-dotsと同じ並びに（右横）に表示させたい。

前回の質問で解決方法を伝授いただき、スライダーそのものは正しく動いております。

Slickスライダーに停止ボタンを追加し、ボタンクリックでスライドを停止するところまではできました。
ボタンの表示をdots（・）の一番右側に配置する方法がわかりません。
お手数ですがよろしくお願いいたします。

<style>
　　.sliderArea{background-color: #fff;margin:0;}
    .center { 
        margin: 0 auto;
        opacity: 0;
        transition: 2s;
        width: 100%;
    }

    .slick-initialized{
    	opacity: 1
    }

    .center img { width: 100%; }

    .center .slick-slide:not(.slick-active) {/* .slick-center → .slick-activeに変更 */
        -webkit-filter: opacity(70%);
        -moz-filter: opacity(70%);
        -o-filter: opacity(70%);
        -ms-filter: opacity(70%);
        filter: opacity(70%);
        transition: 0.2s linear;
    }

    /* 位置調整スタイル */
    .adjustment .slick-list {
        overflow: visible;
        transform: translateX(-30%);
    }
</style>

<script>
    $(document).ready(function(){
        // スライダー要素の数が3以上の時調整用クラスを付与
        (2 < $('.center div').length) ? $('.center').addClass('adjustment') : null;

        $('.center').slick({
            infinite: true, 
            dots:true, 
            centerMode: true,
            centerPadding:'20%',
            slidesToShow:2,
            slidesToScroll: 1,
            autoplay:true,
        });

	//****** コード追加
      $('.button_stop').on('click', function() {
        $('.center').slick('slickPause');
        $('.button_stop').hide();
      });
	//****** ここまで

    });
</script>

</head>
<body>

<div class="sliderArea">
<div class="center">
  <div>
    <img src="phot/top_phot/abc001.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/abc002.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/abc003.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/abc004.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/abc005.jpg" alt="">
  </div>
  <div>
    <img src="phot/top_phot/abc006.jpg" alt="">
  </div>
</div>

//**** 追加コード ****

<div class="button_stop"><img src="images/stop_btn.png" alt="停止"></div>   

//****  ここまで

</div>