Как сделать увеличение блока до 100% при переносе на другую строку?

Question

МолодойПрограммер @Vanek228

HTML
CSS

Как сделать увеличение блока до 100% при переносе на другую строку?

Есть 2 блока с некоторым содержимым, нужно чтобы они располагались в строку, но если для этого требуется ширина каждого из них меньше 300px, один блок переносился на следующую строку, после чего они оба занимали по 100% ширины

<div class="tag-demo-demonstration">
                <div class="tag-showcase">
                    <code>
                        &lt;div&gt;<br>
                            &lt;p <span class="blue-html-span">class</span>=<span class="brown-span">"white-text"</span>&gt;<br>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum 
                                dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>
                            &lt;/p&gt;<br>
                            &lt;p <span class="blue-html-span">id</span>=<span class="brown-span">"black-text"</span>&gt;<br>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum 
                                dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>
                            &lt;/p&gt;<br>
                            &lt;p <span class="blue-html-span">class</span>=<span class="brown-span">"white-text"</span>&gt;<br>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum 
                                dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>
                            &lt;/p&gt;<br>
                        &lt;/div&gt;
                    </code>
                </div>
                <div class="tag-demo">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum 
                                dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum 
                                dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum 
                                dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                                Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>
                </div>
            </div>

.tag-demo-demonstration{
    min-height: 200px;
    margin: 2% 0 2% 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
/*tag-showcase*/
.tag-demo-demonstration .tag-showcase{
    min-width: 270px;
    max-width: 100%;
    display: inline-block;
    padding: 3%;
    background-color: #c2c2c2;
    border-radius: 2% 0 0 2%;
}
.tag-showcase code{
    font-size: 18px;
}
/*tag-demo*/
.tag-demo-demonstration .tag-demo{
    min-width: 270px;
    max-width: 100%;
    display: inline-block;
    padding: 3%;
    background-color: #dadada;
    border-radius: 0 2% 2% 0;
}