Как при изменении ширины страницы, сделать автоматическую подстройку ширины элемент
 

function makeInfoBoxesForTable() {
 
            createElemFirstIntoParentElem('<div>', selectorInfoBox, 'body');
            createElemIntoAnotherElem(selectorUserDataFlex,'<div>', '.' + selectorInfoBox);
 
            applyStyle('.' + selectorUserDataFlex, {
                'max-width': '18%', /* блок занимает ширину родителя, max-width её ограничивает */
                'margin-left': 'auto',
                'margin-top': '1%',
                'margin-bottom': '0.5%',
                'margin-right': '0.1%',
 
                '-webkit-flex-direction': 'row',
 
                'flex-direction': 'row'
            });
 
            /*создание контейнера для хранения уровня доступа*/
            createElemWithHtml('<div>', {
                class: selectorLevelAccess,
                html: nameElemForOwner + " : "
            }, '.' + selectorUserDataFlex);
 
            applyStyle('.' + selectorLevelAccess, {
                'font-family': 'Calibri',
                'font-style': 'italic',
                'color': '#FF8000',
            });
 
            createElemWithHtml('<span>', {
                html: ' '/*nameLevelAccessValue*/
            }, '.' + selectorLevelAccess);
 
            applyStyle('.' + selectorLevelAccess + ' ' + 'span', {
                'color': '#009900',
                'padding-left': '8%'
            });
            /*-----------------------------------*/
 
            /*создание контейнера для хранения имени пользователя*/
            createElemWithHtml('<div>', {
                class: selectorOwner,
                html: nameElemForAccessLevel + " : "
            }, '.' + selectorUserDataFlex);
 
            applyStyle('.' + selectorOwner, {
                'font-family': 'Calibri',
                'font-style': 'italic',
                'color': '#345eff',
                'padding-top': '0'
            });
 
            createElemWithHtml('<span>', {
                html: ' '/*nameOwner*/
            }, '.' + selectorOwner);
 
            applyStyle('.' + selectorOwner + ' ' + 'span', {
                'color': '#753399',
                'padding-left': '3%'
            });
 
        }
 
        /* is created an element inside another of element and be set
        created this element first in list*/
        function createElemFirstIntoParentElem(elem, nameClass, selector) {
            $(elem, {class: nameClass}).prependTo(selector);
        }
 
        function createElemIntoAnotherElem(nameNewClass, elem, toElemSelector) {
            $(elem, {class: nameNewClass}).appendTo(toElemSelector);
        }
 
        /*создание контейнеров с текстом внутри*/
        function createElemWithHtml(elem, attributes, toElemSelector) {
            $(elem, attributes).appendTo(toElemSelector);
        }
 
        /*Применение стиля*/
        function applyStyle(selector, style) {
            $(selector).css(style);
        }
 
        function getNameElemForOwnerFromArr(arr) {
 
            var result = '';
 
            /*external  cycle: parse elements of  one-dimensional array */
            $.each(arr, function (index, associate) {
 
                /*parse elements of associate array*/
                $.each(associate, function (name, value) {
 
                    switch (name) {
                        case 'nameElemRu':
                            if (langLocaleBrowser === 'ru') {
                                result = value;
                            }
                            break;
                        case 'nameElemEn':
                            if (langLocaleBrowser === 'en') {
                                result = value;
                            }
                            break;
                        default:
                            console.log(messageInfo.langCaptionErr);
                    }
                });
            });
 
            return result;
        }
 
        /*defines language messages about error*/
        function defineLangOfMessage() {
 
            createArrMessages();
 
            if (langLocaleBrowser === 'ru') {
                messageInfo = messagesRu;
            } else {
                messageInfo = messagesEn;
            }
        }
 
        /*create array of messages*/
        function createArrMessages() {
 
            messagesRu = {
                langCaptionErr: ('Заголовок для такой локали - не определен!')
            };
 
            messagesEn = {
                langCaptionErr: ('The title for this locale is undefined !')
            }
        }
 
        /* The method describes receive data of browser locale
         * window.navigator.browserLanguage - using for IE
         * */
        function getLang() {
            var lang = window.navigator.languages ? window.navigator.languages [0] : null;
            lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;
            if (lang.indexOf('-') !== -1) {
                lang = lang.split('-')[0];
            }
 
            if (lang.indexOf('_') !== -1) {
                lang = lang.split('_')[0];
            }
            langLocaleBrowser = lang;
 
            console.log('current locale : ' + langLocaleBrowser);
        }
 
        function getRequestOwner(urlRequestOwner) {
 
            $.ajax({
                url: urlRequestOwner,
                method: 'get',
                dataType: 'json',
                success: function (data) {
                    getOwner(data);
 
                },
                error: function (error) {
 
                    console.log(error);
                }
            });
        }
 
        function getOwner(data) {
            var firstName = "";
            var lastName = "";
            var authority = "";
 
            $.each(data, function (key, value) {
                if (key === 'firstName') {
                    firstName = value;
                }
 
                if (key === 'lastName') {
                    lastName = value;
                }
 
                if (key === 'authority') {
 
                    switch (value.toLowerCase()) {
                        case 'admin':
                            authority = "Administrator";
                            break;
                        case 'manager':
                            authority = "Manager";
                            break;
 
                        case 'user':
                            authority = "User";
                            break;
 
                        default: "Authority do not set."
                    }
 
                }
            });
 
            console.log(firstName + " : " + lastName + " : " + authority);
            nameOwner = firstName + " " + lastName
 
            $('.' + selectorOwner + ' ' + 'span').html(nameOwner);
 
            $('.' + selectorLevelAccess + ' ' + 'span').html(authority);
 
        }

при разрешении 1920:1080 все прекрасно, но вот при изменении разрешения информационный блок разъезжается, как это исправить ?

спасибо.