css inline-table and table cell alignment of elements

1
votes

I have a pure CSS question. I have a div with 3 span elements within. This is made for a right to left language. All three elements are vertical aligned with display: table-cell -> verticle align. The first element is an icon png with a round background and is aligned to the utmost right. Second element is spaced from first element and is just text but I need the third element, the yellow button, to be aligned to the far left. What would be my css to do that.

this is what I have so far

    <style>
    .ttbl{
    display:inline-table; 
      background: #FFFFFF 0% 0% no-repeat padding-box;
      box-shadow: 0px 1px 6px #00000029; 
      border-radius: 2px; 
      opacity: 1; 
      min-height:100px;
    }

    .assist-us-circle {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        text-align: center;
        line-height: 73px;
        vertical-align: middle;
        display: inline-block;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 3px 6px #00000029;
        background: #ccc;
    }
    </style>


    <div class="container" style="direction:rtl;">
        <div class="row">
            <div class="col-12">
                <div class="w-100 mt-5 ttbl">
                    <div style="display:table-cell; vertical-align:middle; text-align: right; padding:0px 30px;">
                        <span class="assist-us-circle">
                            <img src="assets/images/credit-card-icon.png">
                        </span>
                        <span style="margin-right:40px;font-size:18px;line-height:26px;font-weight:600;">donation via credit card</span>   
                        <span style="background: #FFDEAC 0% 0% no-repeat padding-box;border-radius: 2px;padding:10px 20px;line-height: 75px;">donate now</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

I have added a pen for your convenience.

https://codepen.io/yaary-vidanpeled/pen/pojxxwo

Thank you for any help rendered

2
css

2 Answers

2
votes

The float css property can be used

Try this:

<span style="float:left;background: #FFDEAC 0% 0% no-repeat padding-box;border-radius: 2px;padding:10px 20px;margin-top: 10px;">donate now</span>
1
votes
.container {
  display: flex;
  justify-contents: space-between;
  align-items: center
}


<div class="container">
  <div>
    <span>a</span>
  </div>
  <div>
    <span>b</span>
    <span>c</span>
  </div>
</div>