styleタグの中にrubyの変数を入れたい

###実現したいこと
styleタグにrubyの変数を入れたい
もし、方法があればその方法を教えていただきたいです。

###試したこと
jqueryでrubyの変数を使わずに、代わりとなる変数をjquery上で準備し、styleタグを直接htmlに反映させた。
成功はするものの、なぜか挙動がおかしい。

.cssやstyleタグの中で書けば成功するが、

<div class="test"style:"break-before: column;"> のように書くと反映はされているものの動きが変になる

他にも、.cssに.wrap {break-before: column;}の様にして、jQueryでcssを追加させたりもしましたが反映されるもののうまくいきません。

ですので、<style>この中</style>に書こうと考えました。

期待していない動き

期待した動き

###現状のコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="index.css">
7    <title>Document</title>
8</head>
9<body>
10  <div class="container">
11    <div class="boxes">
12      <div class="content">
13        <div class="title">
14          <div class="txt">
15            <p>ボックスタイトル1</p>
16          </div>
17        </div>
18        <div class="test_block">
19          <div class="test_container">
20            <div class="test">
21              <p>test1</p>
22            </div>
23            <div class="test">
24              <p>test2</p>
25            </div>
26            <div class="test">
27              <p>test3</p>
28            </div>
29            <div class="test">
30              <p>test4</p>
31            </div>
32          </div>
33        </div>
34      </div>
35      <div class="content">
36        <div class="title">
37          <div class="txt">
38            <p>ボックスタイトル2</p>
39          </div>
40        </div>
41        <div class="test_block">
42          <div class="test_container">
43            <div class="test">
44              <p>test1</p>
45            </div>
46            <div class="test">
47              <p>test2</p>
48            </div>
49            <div class="test">
50              <p>test3</p>
51            </div>
52            <div class="test">
53              <p>test4</p>
54            </div>
55          </div>
56        </div>
57      </div>
58      <div class="content">
59        <div class="title">
60          <div class="txt">
61            <p>ボックスタイトル3</p>
62          </div>
63        </div>
64        <div class="test_block">
65          <div class="test_container">
66            <div class="test">
67              <p>test1</p>
68            </div>
69            <div class="test">
70              <p>test2</p>
71            </div>
72            <div class="test">
73              <p>test3</p>
74            </div>
75            <div class="test">
76              <p>test4</p>
77            </div>
78          </div>
79        </div>
80      </div>
81      <div class="content">
82        <div class="title">
83          <div class="txt">
84            <p>ボックスタイトル4</p>
85          </div>
86        </div>
87        <div class="test_block">
88          <div class="test_container">
89            <div class="test">
90              <p>test1</p>
91            </div>
92            <div class="test">
93              <p>test2</p>
94            </div>
95            <div class="test">
96              <p>test3</p>
97            </div>
98            <div class="test">
99              <p>test4</p>
100            </div>
101          </div>
102        </div>
103      </div>
104    </div>
105  </div>
106  <script
107    src="https://code.jquery.com/jquery-1.12.4.min.js"
108    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
109    crossorigin="anonymous"></script>
110  <script>
111    $(function(){
112      $(".title").on("click", function() {
113        $(this).next().slideToggle();
114      });
115    });
116  </script>
117</body>
118
119</html>

css
1* {
2  box-sizing: border-box;
3}
4.container {
5  background-color: rgb(182, 210, 253);
6  height: 100vh;
7}
8.container .boxes {
9  width: 900px;
10  margin: 0 auto;
11  padding: 3rem 0;
12  /* display: flex;
13  flex-wrap: wrap; */
14  justify-content: space-between;
15  align-items: flex-start;
16  columns: 2;
17  column-fill: auto;
18}
19
20.container .boxes .content {
21  width: 80%;
22  background-color: rgb(187, 247, 172);
23  margin-bottom: 1rem;
24}
25.container .boxes .wrap {
26  break-before: column;
27}
28★↓のコメントアウトを外せば、期待した動きになる。
29/* .container .boxes .content:nth-child(3) {
30  break-before: column;
31} */
32.container .boxes .content .title{
33  cursor: pointer;
34  padding: 0.43rem 1rem 0.43rem 0.5rem;
35  padding-bottom: 0.43rem;
36  border-bottom: 1px solid #383838;
37}
38.container .boxes .content .test_block {
39  display: none;
40}
41.container .boxes .content .test_block .test_container{
42  display: flex;
43  flex-direction: row;
44  flex-wrap: wrap;
45  background-color: #FDFDFD;
46  border-bottom: 1px solid #e7e7e7;
47}
48.container .boxes .content .test_block .test_container .test{
49  width: 50%;
50  padding: 13px 18px 13px 16px;
51  border-top: 1px solid #e7e7e7;
52  border-left: 1px solid #e7e7e7;
53}
54