Developer Snippet Diary

horizontal card layout with two sections LEFT and Right HTML CSS Flex

<style>
    .lr_card{
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-top: 1px solid #8080802e;
        border-bottom: 1px solid #8080802e;
    }
    .lr_card .right_section{
        border-left: 1px solid #80808040;
        padding-left: 45px;
    }
    .lr_card .price{
        font-weight: bold;
    }
    .lr_card .price_title{
        font-size: 14px;
    }
</style>
<div class="lr_card">
    <div class="left_section">
        <div class="price_title">Estimated Price</div>
        <div class="price">$34,324</div>
    </div>
    <div class="right_section">
        <div class="price_title">Estimated Savings</div>
        <div class="price">$34,324</div>
    </div>
</div>
Posted by: R GONDAL
Email: rizikmw@gmail.com