how to set position of <div> element based on another <div> element by CSS and BootStrap

I develop bootstrap asp.net mvc. I have a element that I want to place on right bottom of another element. I adjust it like this

HTML

<div class="container-fluid" style="vertical-align:middle; position:center;">
    <div class="row" style="vertical-align:middle; position:center;">
        @Html.DevExpress().ImageSlider(s =>
   {
       s.Name = "ImageSlider1";
       s.Width = Unit.Percentage(100);
       s.Height = Unit.Pixel(400);

       s.SettingsImageArea.ImageSizeMode = ImageSizeMode.FillAndCrop;
       s.SettingsImageArea.NavigationButtonVisibility = ElementVisibilityMode.OnMouseOver;
       s.SettingsImageArea.EnableLoopNavigation = true;
       s.SettingsImageArea.AnimationType = AnimationType.Slide;
       s.SettingsImageArea.NavigationDirection = NavigationDirection.Vertical;
       s.SettingsNavigationBar.Position = NavigationBarPosition.Left;
       s.SettingsNavigationBar.PagingMode = NavigationBarPagingMode.Single;
       s.SettingsNavigationBar.Mode = NavigationBarMode.Thumbnails;



   }).BindToFolder("~/Content/Images/widescreen").GetHtml()


            <div id="countdown" style=" margin-top:62%; margin-right:3%;" >
                <div id='tiles'></div>
                <div class="labels">
                    <li>days</li>
                    <li>Hours</li>
                    <li>Min</li>
                    <li>Seconds</li>
                </div>
            </div>

        </div>
    </div>

in CSS

    #countdown{
    width: 230px;
    height: 72px;
    position: relative-to first-sibling(.row); 
    bottom: 2px; 
    right: 2px;
    text-align: center;
    background: #222;
    background-color: transparent;
    /*background-image: -webkit-linear-gradient(top, #f7530a, #e6a815, #e6a815, #f7530a);*/ 
    background-image: -webkit-linear-gradient(top, green,#fff, #fff, green);
    background-image:    -moz-linear-gradient(top, #222, #333, #333, #222);
    background-image:     -ms-linear-gradient(top, #222, #333, #333, #222);
    background-image:      -o-linear-gradient(top, #222, #333, #333, #222);
    border: 1px solid #111;
    border-radius: 5px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
    margin: auto;
    padding: 24px 0 2px 0;
    position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

it OK like this picture. but i want this element fix to right bottom of that element even the windows size reduce or change

enter image description here

To position an element so that it is always at the bottom right of it's container. You can use position relative on the container and position absolute on the child. This will position the child absolutely, relative to the container.

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}