Как расположить тарифы в таблице цен Stripe в строки? [закрыто]

Question

Я вставил таблицу цен Stripe на свой сайт, но ценовые планы выстроены вертикально (в колонках), а не в строках. Я подозреваю, что это проблема с моими стилями, потому что на моем информационном панели Stripe ценовые планы расположены в строках, как и планировалось.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container {
    display: flex;
    max-width: 1000px;
    width: 90%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.left-section {
    background-color: #003366;
    color: white;
    padding: 30px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.discount-code {
    background-color: #b5ff81;
    color: #01000e;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 1rem;
    margin: 0;
}

.early-user-discount {
    background-color: #feffff;
    color: #003366;
    font-weight: bold;
    font-family: epilogue;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 1rem;
    text-transform: uppercase;
    margin: 0;
}

.discount-text {
    font-size: 45px;
    font-weight: bold;
    line-height: 1.4;
    font-style: italic;
    font-family: 'Epilogue';
}

.code-text {
color: #b5ff81
}


.info-text {
    font-size: 21px;
    color: #d1d1d1;
    font-family: epilogue;
    margin-top: auto;
}

.right-section {
    background-color: white;
    padding: 30px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    max-height: 80vh; 
overflow-y: auto;  
}

.right-section h1 {
    font-size: 1.5rem;
    color: #003366;
}

.stripe-table-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
    gap: 20px; 
flex-wrap: wrap;
}

.cta-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
}

.cta-button {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.join-btn {
    background-color: #007BFF;
    color: white;
}

.join-btn:hover {
    background-color: #0056b3;
}

.learn-more-btn {
    background-color: white;
    color: #007BFF;
    border: 2px solid #007BFF;
}

.learn-more-btn:hover {
    background-color: #007BFF;
    color: white;
}

.login-text {
    font-size: 0.9rem;
    color: #555;
    margin-top: 15px;
}

.login-link {
    color: #007BFF;
    font-weight: bold;
    text-decoration: none;
}

.login-link:hover {
    text-decoration: underline;
}

.additional-text {
    font-size: 1rem;
    color: #333;
    font-family: epilogue;
}

@media (max-width: 768px) {
.modal {
padding: 20px; 
}

.container {
flex-direction: column; 
width: 90%; 
max-width: 400px; 
margin: auto; 
}

.left-section, .right-section {
padding: 15px; 
}

.discount-text {
font-family: 'Epilogue';
font-size: 1.2rem; 
}

.info-text, .additional-text {
font-size: 0.9rem; 
}

.cta-button {
width: 100%; 
padding: 12px 0; 
font-size: 1rem; 
}

.stripe-table-container {
flex-direction: column; 
width: 100%; 
}

.blur {
filter: blur(2px);
}
}

<div class="container">
    <!-- Левая секция -->
    <div class="left-section">
        <div class="discount-code">DISCOUNTCode</div>
        <div class="early-user-discount">Скидка 80% для ранних пользователей на всю жизнь</div>
        <p class="discount-text">
            Скидка 80% на всю жизнь для ранних пользователей, используйте этот код: 
            <span class="code-text">“DISCOUNTCode”</span>
        </p>            
        <p class="info-text">"Информационный текст здесь"</p>
    </div>

    <!-- Правая секция -->
    <div class="right-section">
        <h1>Начните свою бесплатную пробную версию на 14 дней сейчас</h1>

        <!-- Таблица цен Stripe -->
        <div class="stripe-table-container">
            <stripe-pricing-table pricing-table-id="table-id-here"
            publishable-key="publishable-key-here">
            </stripe-pricing-table>
        </div>

        <!-- Дополнительный текст -->
        <p class="additional-text">Дополнительный текст здесь.</p>

        <!-- Кнопки призыва к действию -->
        <div class="cta-container">
            <button class="cta-button learn-more-btn">Узнать больше</button>
            <button class="cta-button join-btn">Присоединиться сейчас</button>
        </div>

        <!-- Секция входа -->
        <p class="login-text">
            Уже пользователь? 
            <a href="https://stackoverflow.com/questions/79145478/{% url"check_login' %}" class="login-link">Войти</a>
        </p>
    </div>
</div>

Как расположить тарифы в таблице цен Stripe в строки? [закрыто]

Вопрос или проблема

Ответ или решение

Шаг 1: Изменение стилей CSS

Шаг 2: Корректировка HTML кода

Шаг 3: Проверка мобильной адаптивности

Шаг 4: Тестирование

Заключение