I currently have a bootstrap 4 layout featuring 3 columns, with the middle column containing two nested columns. One of these nested columns includes an embedded YouTube video with responsive sizing, while the other displays a scrollable list of text with a red background. I am seeking to set the height of the scrollable column to match exactly that of the embedded video, ensuring it remains resizable and responsive. If the device width is insufficient, the scrollable column should collapse beneath the video. Here is the code for reference: https://jsfiddle.net/h7f8r1ut/
I would appreciate any suggestions on achieving this without relying on JavaScript.
Despite researching similar queries, I was unable to locate a solution that aligns perfectly with my specific requirements.
.scroll {
text-align: left;
height: 40vh;
overflow: hidden;
overflow-y: scroll;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 bg-dark text-info">
left sidebar
</div>
<div class="col-md-8 bg-secondary">
<div class="container-fluid">
<div class="row">
<div class="col-md-10" id="video">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-2 scroll bg-danger">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p>41</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 bg-dark text-info">
right sidebar
</div>
</div>
</div>
</div>