0

I'm trying to make an autocomplex box with multiselects. At the moment I have a flex parent container. Child elements are wrapping. It currently looks like this

enter image description here

I am trying to another child element that sticks on the far right. I have a JS fiddle of my adding the new child element but unfortunately it doesn't stick to the right and I'm unsure how to get it to.

https://jsfiddle.net/rgxph5j3/

enter image description here

I've tried many suggestions from here How to Right-align flex item?

What I've tried to set 'X' to

margin-left:auto

text-align: right;

justify-content: flex-end;

flex: 1 1 auto;

Any tips or suggestions would be greatly appreciated

Master
  • 2,038
  • 2
  • 27
  • 77

1 Answers1

2

One solution would be to target the last div (the one you want aligned to the right, and just give it flex-grow: 1, that way it will adjust it's width to occupy all available space on that row.

You can then adjust justify-content: flex-end to align all it's contents to the right, like so:

#DIV_1 > div:last-of-type {
    flex-grow: 1;
    justify-content: flex-end;
}


#DIV_1 > div:last-of-type {
    flex-grow: 1;
    justify-content: flex-end;
    height: 100%;
}
#DIV_1 {
    align-items: center;
    block-size: 52px;
    box-sizing: border-box;
    caret-color: rgb(42, 57, 74);
    color: rgb(42, 57, 74);
    column-rule-color: rgb(42, 57, 74);
    cursor: default;
    display: flex;
    height: 52px;
    justify-content: flex-start;
    perspective-origin: 194px 26px;
    text-align: left;
    text-decoration: none solid rgb(42, 57, 74);
    text-size-adjust: 100%;
    transform-origin: 194px 26px;
    width: 388px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 1px solid rgb(13, 113, 200);
    border-radius: 1px;
    flex-flow: row wrap;
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(42, 57, 74) none 0px;
    padding: 0px 8px 0px 0px;
}/*#DIV_1*/

#DIV_1:after {
    box-sizing: border-box;
    caret-color: rgb(42, 57, 74);
    color: rgb(42, 57, 74);
    column-rule-color: rgb(42, 57, 74);
    cursor: default;
    display: block;
    text-align: left;
    text-decoration: none solid rgb(42, 57, 74);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(42, 57, 74) none 0px;
}/*#DIV_1:after*/

#DIV_1:before {
    box-sizing: border-box;
    caret-color: rgb(42, 57, 74);
    color: rgb(42, 57, 74);
    column-rule-color: rgb(42, 57, 74);
    cursor: default;
    display: block;
    text-align: left;
    text-decoration: none solid rgb(42, 57, 74);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(42, 57, 74) none 0px;
}/*#DIV_1:before*/


#DIV_3, #DIV_9, #DIV_15, #DIV_21, #DIV_27, #DIV_33, #DIV_39, #DIV_45 {
    align-items: center;
    block-size: 12px;
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    display: flex;
    height: 12px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 6.5px 6px;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    transform-origin: 6.5px 6px;
    width: 13px;
    border-top: 0px solid rgba(0, 0, 0, 0);
    border-right: 0px solid rgba(0, 0, 0, 0);
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    margin: 0px 0px 0px 4px;
    outline: rgb(255, 255, 255) none 0px;
    padding: 2px 0px 2px 4px;
}/*#DIV_3, #DIV_9, #DIV_15, #DIV_21, #DIV_27, #DIV_33, #DIV_39, #DIV_45*/

#DIV_3:after, #DIV_9:after, #DIV_15:after, #DIV_21:after, #DIV_27:after, #DIV_33:after, #DIV_39:after, #DIV_45:after {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_3:after, #DIV_9:after, #DIV_15:after, #DIV_21:after, #DIV_27:after, #DIV_33:after, #DIV_39:after, #DIV_45:after*/

#DIV_3:before, #DIV_9:before, #DIV_15:before, #DIV_21:before, #DIV_27:before, #DIV_33:before, #DIV_39:before, #DIV_45:before {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_3:before, #DIV_9:before, #DIV_15:before, #DIV_21:before, #DIV_27:before, #DIV_33:before, #DIV_39:before, #DIV_45:before*/

#DIV_4, #DIV_10, #DIV_16, #DIV_22, #DIV_28, #DIV_34, #DIV_40, #DIV_46 {
    block-size: 8px
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    height: 8px;
    inline-size: 8px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 4px 4px;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    transform-origin: 4px 4px;
    width: 8px;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_4, #DIV_10, #DIV_16, #DIV_22, #DIV_28, #DIV_34, #DIV_40, #DIV_46*/

#DIV_4:after, #DIV_10:after, #DIV_16:after, #DIV_22:after, #DIV_28:after, #DIV_34:after, #DIV_40:after, #DIV_46:after {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_4:after, #DIV_10:after, #DIV_16:after, #DIV_22:after, #DIV_28:after, #DIV_34:after, #DIV_40:after, #DIV_46:after*/

#DIV_4:before, #DIV_10:before, #DIV_16:before, #DIV_22:before, #DIV_28:before, #DIV_34:before, #DIV_40:before, #DIV_46:before {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_4:before, #DIV_10:before, #DIV_16:before, #DIV_22:before, #DIV_28:before, #DIV_34:before, #DIV_40:before, #DIV_46:before*/

#SPAN_5, #SPAN_11, #SPAN_17, #SPAN_23, #SPAN_29, #SPAN_35, #SPAN_41, #SPAN_47 {
    block-size: 8px;
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    display: flex;
    height: 8px;
    inline-size: 8px;
    justify-content: center;
    perspective-origin: 4px 4px;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transform-origin: 4px 4px;
    width: 8px;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_5, #SPAN_11, #SPAN_17, #SPAN_23, #SPAN_29, #SPAN_35, #SPAN_41, #SPAN_47*/

#SPAN_5:after, #SPAN_11:after, #SPAN_17:after, #SPAN_23:after, #SPAN_29:after, #SPAN_35:after, #SPAN_41:after, #SPAN_47:after {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_5:after, #SPAN_11:after, #SPAN_17:after, #SPAN_23:after, #SPAN_29:after, #SPAN_35:after, #SPAN_41:after, #SPAN_47:after*/

#SPAN_5:before, #SPAN_11:before, #SPAN_17:before, #SPAN_23:before, #SPAN_29:before, #SPAN_35:before, #SPAN_41:before, #SPAN_47:before {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_5:before, #SPAN_11:before, #SPAN_17:before, #SPAN_23:before, #SPAN_29:before, #SPAN_35:before, #SPAN_41:before, #SPAN_47:before*/

#svg_6, #svg_12, #svg_18, #svg_24, #svg_30, #svg_36, #svg_42, #svg_48 {
    block-size: 8px;
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    fill: rgb(255, 255, 255);
    height: 8px;
    inline-size: 8px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 4px 4px;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    transform-origin: 4px 4px;
    width: 8px;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#svg_6, #svg_12, #svg_18, #svg_24, #svg_30, #svg_36, #svg_42, #svg_48*/

#svg_6:after, #svg_12:after, #svg_18:after, #svg_24:after, #svg_30:after, #svg_36:after, #svg_42:after, #svg_48:after {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    fill: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#svg_6:after, #svg_12:after, #svg_18:after, #svg_24:after, #svg_30:after, #svg_36:after, #svg_42:after, #svg_48:after*/

#svg_6:before, #svg_12:before, #svg_18:before, #svg_24:before, #svg_30:before, #svg_36:before, #svg_42:before, #svg_48:before {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    fill: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#svg_6:before, #svg_12:before, #svg_18:before, #svg_24:before, #svg_30:before, #svg_36:before, #svg_42:before, #svg_48:before*/

#path_7, #path_13, #path_19, #path_25, #path_31, #path_37, #path_43, #path_49 
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    d: path("M 542.165 512 L 1017.77 36.437 C 1026.09 28.117 1026.09 14.592 1017.77 6.27201 S 995.925 -2.04799 987.605 6.27201 L 512 481.835 L 36.437 6.272 C 28.117 -2.048 14.592 -2.048 6.27201 6.272 S -2.04799 28.117 6.27201 36.437 L 481.835 512 L 6.272 987.563 C -2.048 995.883 -2.048 1009.41 6.272 1017.73 C 10.411 1021.91 15.872 1024 21.333 1024 S 32.256 1021.91 36.437 1017.77 L 512 542.166 L 987.563 1017.77 C 991.744 1021.91 997.206 1024 1002.67 1024 S 1013.59 1021.91 1017.77 1017.77 C 1026.09 1009.45 1026.09 995.926 1017.77 987.606 L 542.166 512.001 Z");
    fill: rgb(255, 255, 255);
    perspective-origin: 0px 0px;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    transform-origin: 0px 0px;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#path_7, #path_13, #path_19, #path_25, #path_31, #path_37, #path_43, #path_49*/

#path_7:after, #path_13:after, #path_19:after, #path_25:after, #path_31:after, #path_37:after, #path_43:after, #path_49:after {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    fill: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#path_7:after, #path_13:after, #path_19:after, #path_25:after, #path_31:after, #path_37:after, #path_43:after, #path_49:after*/

#path_7:before, #path_13:before, #path_19:before, #path_25:before, #path_31:before, #path_37:before, #path_43:before, #path_49:before {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: pointer;
    fill: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#path_7:before, #path_13:before, #path_19:before, #path_25:before, #path_31:before, #path_37:before, #path_43:before, #path_49:before*/

#DIV_8, #DIV_14 {
    block-size: 16px;
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: default;
    display: flex;
    height: 16px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto
    perspective-origin: 27.3281px 8px;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    transform-origin: 27.3281px 8px;
    width: 54.6562px;
    background: rgb(179, 229, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px solid rgb(179, 229, 255);
    border-radius: 8px;
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    margin: 2px 3px 2px 0px;
    outline: rgb(255, 255, 255) none 0px;
    padding: 2px 6px;
}/*#DIV_8, #DIV_14*/

#DIV_8:after, #DIV_14:after {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: default;
    display: block;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_8:after, #DIV_14:after*/

#DIV_8:before, #DIV_14:before {
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor: default;
    display: block;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_8:before, #DIV_14:before*/

#INPUT_50 {
    block-size: 30px;
    caret-color: rgb(42, 57, 74);
    color: rgb(42, 57, 74);
    column-rule-color: rgb(42, 57, 74);
    display: flex;
    height: 30px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 79.5px 15px;
    text-decoration: none solid rgb(42, 57, 74);
    text-size-adjust: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transform-origin: 79.5px 15px;
    width: 159px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(42, 57, 74);
    font: 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(42, 57, 74) none 0px;
    padding: 8px 0px 8px 8px;
}/*#INPUT_50*/

#INPUT_50:after {
    border-block-end-color: rgba(0, 0, 0, 0);
    border-block-end-style: solid;
    border-block-start-color: rgba(0, 0, 0, 0);
    border-block-start-style: solid;
    border-inline-end-color: rgba(0, 0, 0, 0);
    border-inline-end-style: solid;
    border-inline-start-color: rgba(0, 0, 0, 0);
    border-inline-start-style: solid;
    box-sizing: border-box;
    caret-color: rgb(42, 57, 74);
    color: rgb(42, 57, 74);
    column-rule-color: rgb(42, 57, 74);
    display: block;
    text-decoration: none solid rgb(42, 57, 74);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(42, 57, 74) none 0px;
}/*#INPUT_50:after*/

#INPUT_50:before {
    border-block-end-color: rgba(0, 0, 0, 0);
    border-block-end-style: solid;
    border-block-start-color: rgba(0, 0, 0, 0);
    border-block-start-style: solid;
    border-inline-end-color: rgba(0, 0, 0, 0);
    border-inline-end-style: solid;
    border-inline-start-color: rgba(0, 0, 0, 0);
    border-inline-start-style: solid;
    box-sizing: border-box;
    caret-color: rgb(42, 57, 74);
    color: rgb(42, 57, 74);
    column-rule-color: rgb(42, 57, 74);
    display: block;
    text-decoration: none solid rgb(42, 57, 74);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(42, 57, 74) none 0px;
}/*#INPUT_50:before*/

#DIV_51 {
    align-items: center;
    align-self: flex-end;
    block-size: 8px;
    border-block-end-color: rgba(0, 0, 0, 0);
    border-block-end-style: solid;
    border-block-start-color: rgba(0, 0, 0, 0);
    border-block-start-style: solid;
    border-inline-end-color: rgba(0, 0, 0, 0);
    border-inline-end-style: solid;
    border-inline-start-color: rgba(0, 0, 0, 0);
    border-inline-start-style: solid;
    box-sizing: border-box;
    caret-color: rgb(15, 27, 49);
    color: rgb(15, 27, 49);
    column-rule-color: rgb(15, 27, 49);
    cursor: pointer;
    display: flex;
    height: 8px;
    inline-size: 24px;
    justify-content: center;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    padding-inline-end: 4px;
    padding-inline-start: 12px;
    perspective-origin: 12px 4px;
    text-align: left;
    text-decoration: none solid rgb(15, 27, 49);
    text-size-adjust: 100%;
    transform-origin: 12px 4px;
    user-select: none;
    width: 24px;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(15, 27, 49) none 0px;
    padding: 0px 4px 0px 12px;
}/*#DIV_51*/

#DIV_51:after {
    box-sizing: border-box;
    caret-color: rgb(15, 27, 49);
    color: rgb(15, 27, 49);
    column-rule-color: rgb(15, 27, 49);
    cursor: pointer;
    display: block;
    text-align: left;
    text-decoration: none solid rgb(15, 27, 49);
    text-size-adjust: 100%;
    user-select: none;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(15, 27, 49) none 0px;
}/*#DIV_51:after*/

#DIV_51:before {
    border-block-end-color: rgba(0, 0, 0, 0);
    border-block-end-style: solid;
    border-block-start-color: rgba(0, 0, 0, 0);
    border-block-start-style: solid;
    border-inline-end-color: rgba(0, 0, 0, 0);
    border-inline-end-style: solid;
    border-inline-start-color: rgba(0, 0, 0, 0);
    border-inline-start-style: solid;
    box-sizing: border-box;
    caret-color: rgb(15, 27, 49);
    color: rgb(15, 27, 49);
    column-rule-color: rgb(15, 27, 49);
    cursor: pointer;
    display: block;
    text-align: left;
    text-decoration: none solid rgb(15, 27, 49);
    text-size-adjust: 100%;
    user-select: none;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(15, 27, 49) none 0px;
}/*#DIV_51:before*/

#DIV_52 {
    block-size: 8px;
    box-sizing: border-box;
    caret-color: rgb(15, 27, 49);
    color: rgb(15, 27, 49);
    column-rule-color: rgb(15, 27, 49);
    cursor: pointer;
    height: 8px;
    inline-size: 8px;
    min-block-size: auto;
    min-height: auto;
    min-inline-size: auto;
    min-width: auto;
    perspective-origin: 4px 4px;
    text-align: left;
    text-decoration: none solid rgb(15, 27, 49);
    text-size-adjust: 100%;
    transform-origin: 4px 4px;
    user-select: none;
    width: 8px;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(15, 27, 49) none 0px;
}/*#DIV_52*/

#DIV_52:after {
    box-sizing: border-box;
    caret-color: rgb(15, 27, 49);
    color: rgb(15, 27, 49);
    column-rule-color: rgb(15, 27, 49);
    cursor: pointer;
    text-align: left;
    text-decoration: none solid rgb(15, 27, 49);
    text-size-adjust: 100%;
    user-select: none;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(15, 27, 49) none 0px;
}/*#DIV_52:after*/

#DIV_52:before {
    box-sizing: border-box;
    caret-color: rgb(15, 27, 49);
    color: rgb(15, 27, 49);
    column-rule-color: rgb(15, 27, 49);
    cursor: pointer;
    text-align: left;
    text-decoration: none solid rgb(15, 27, 49);
    text-size-adjust: 100%;
    user-select: none;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(15, 27, 49) none 0px;
}/*#DIV_52:before*/

#SPAN_53 {
    block-size: 8px;
    box-sizing: border-box;
    caret-color: rgb(15, 27, 49);
    color: rgb(15, 27, 49);
    column-rule-color: rgb(15, 27, 49);
    cursor: pointer;
    display: flex;
    height: 8px;
    inline-size: 8px;
    justify-content: center;
    perspective-origin: 4px 4px;
    text-align: left;
    text-decoration: none solid rgb(15, 27, 49);
    text-size-adjust: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transform-origin: 4px 4px;
    user-select: none;
    width: 8px;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(15, 27, 49) none 0px;
}/*#SPAN_53*/

#SPAN_53:after {
    box-sizing: border-box;
    caret-color: rgb(15, 27, 49);
    color: rgb(15, 27, 49);
    column-rule-color: rgb(15, 27, 49);
    cursor: pointer;
    display: block;
    text-align: left;
    text-decoration: none solid rgb(15, 27, 49);
    text-size-adjust: 100%;
    user-select: none;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(15, 27, 49) none 0px;
}/*#SPAN_53:after*/

#SPAN_53:before {
    box-sizing: border-box;
    caret-color: rgb(15, 27, 49);
    color: rgb(15, 27, 49);
    column-rule-color: rgb(15, 27, 49);
    cursor: pointer;
    display: block;
    text-align: left;
    text-decoration: none solid rgb(15, 27, 49);
    text-size-adjust: 100%;
    user-select: none;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(15, 27, 49) none 0px;
}
<div id="DIV_1">
    <div id="DIV_8">
        gold sponsor
        <div id="DIV_3">
            <div id="DIV_4">
                <span id="SPAN_5"></span>
                <svg id="svg_6">
                    <path id="path_7">
                    </path>
                </svg>
            </div>
        </div>
    </div>
    <div id="DIV_8">
        test1
        <div id="DIV_9">
            <div id="DIV_10">
                <span id="SPAN_11"></span>
                <svg id="svg_12">
                    <path id="path_13">
                    </path>
                </svg>
            </div>
        </div>
    </div>
    <div id="DIV_8">
        test2
        <div id="DIV_15">
            <div id="DIV_16">
                <span id="SPAN_17"></span>
                <svg id="svg_18">
                    <path id="path_19">
                    </path>
                </svg>
            </div>
        </div>
    </div>
    <div id="DIV_8">
        zach
        <div id="DIV_21">
            <div id="DIV_22">
                <span id="SPAN_23"></span>
                <svg id="svg_24">
                    <path id="path_25">
                    </path>
                </svg>
            </div>
        </div>
    </div>
    <div id="DIV_8">
        medicare a&amp;B
        <div id="DIV_27">
            <div id="DIV_28">
                <span id="SPAN_29"></span>
                <svg id="svg_30">
                    <path id="path_31">
                    </path>
                </svg>
            </div>
        </div>
    </div>
    <div id="DIV_8">
        days
        <div id="DIV_33">
            <div id="DIV_34">
                <span id="SPAN_35"></span>
                <svg id="svg_36">
                    <path id="path_37">
                    </path>
                </svg>
            </div>
        </div>
    </div>
    <div id="DIV_8">
        new tag 1
        <div id="DIV_39">
            <div id="DIV_40">
                <span id="SPAN_41"></span>
                <svg id="svg_42">
                    <path id="path_43">
                    </path>
                </svg>
            </div>
        </div>
    </div>
    <div id="DIV_8">
        test
        <div id="DIV_45">
            <div id="DIV_46">
                <span id="SPAN_47"></span>
                <svg id="svg_48">
                    <path id="path_49">
                    </path>
                </svg>
            </div>
        </div>
    </div>
    <input id="INPUT_50" name="TagList" />
    <div id="DIV_51">
        <div id="DIV_52">
            <span id="SPAN_53"></span>
            X
        </div>
    </div>
</div>
cMarius
  • 1,090
  • 2
  • 11
  • 27
  • Thank you for your informative answer. May I ask if I want to tweak it so it's at the top right, any suggestions? – Master May 12 '21 at 13:32
  • You can always give that last div an absolute positioning, like this: `position: absolute; top: 0; right: 0;` and give the container a padding, so it doesn't cover up content. – cMarius May 12 '21 at 13:46