Как разместить два элемента в ряд?

Question

[Nik Faraday]

Использую бутстраповский файл инпут, возле него стоит фотография (h: 40px; w: 40px). Мне нужно сделать размер этого инпута динамическим, что бы он заполнял оставшееся место, но не без переноса (width: 100% не подходит). Вот код:

<div class="col-lg-12 form-group field-agreement-number">
                                <label>@localizator["ProfilePhoto"]</label>
                                <div style="border: 1px solid #cccccc; padding: 5px;">
                                    
                                        <img id="profile-image-preview" src="data:image;base64,@System.Convert.ToBase64String(Model.User.Avatar)" style="width: 40px; height: 40px;" />
                                    <div class="custom-file" style="display: inline-block; width: auto;">
                                        <input type="file" class="custom-file-input" accept=".jpg" id="upload-avatar" required>
                                        <label id="profile-image-name-label" class="custom-file-label" for="upload-avatar">@localizator["ChooseFile..."]</label>
                                    </div>
                                    <br />
                                    <input type="button" class="btn btn-success btn-block d-none" id="upload-profile-image-btn" value="@localizator["Upload"]" />
                                </div>
                            </div>

UPD: результат ПРИМЕРНО следующий получается:

Answer 1

[Denkuwus]

Можно установить для свойства width элемента .custom-file значение 100%, а для свойства display — значение flex, чтобы заполнить оставшееся пространство без переноса элемента. Еще можно установить для свойства align-items значение center, чтобы вертикально выровнять элементы внутри элемента .custom-file.

<div class="col-lg-12 agreement-number-group-form">
    <label>@localizator["ProfilePhoto"]</label>
    <div style="border: 1px solid #cccccc; padding: 5px;">
        <img id="profile-image-preview" src="data:image;base64,@System.Convert.ToBase64String(Model.User.Avatar)" style="width: 40px; height: 40px;" />
        <div class="custom-file" style="display: flex; width: 100%; align-items: center;">
            <input type="file" class="custom-file-input" accept=".jpg" id="upload-avatar" required>
            <label id="profile-image-name-label" class="custom-file-label" for="upload-avatar">@localizator["ChooseFile..."]</label>
        </div>
        <br />
        <input type="button" class="btn btn-success btn-block d-none" id="upload-profile-image-btn" value="@localizator["Upload"]" />
    </div>
</div>

Comments

[Nik Faraday]

Denkuwus, тогда переносится инпут

[Nik Faraday]

Denkuwus .custom-file это бутстраповский блок полностью

[EvgenyApMr]

Добавить внешний блок и сделать относительное позиционирование внутри него? Если идея понравится, то могу написать подробнее

[Nik Faraday]

EvgenyApMr, любая идея хорошая, мне не важно как оно будет реализовано. Главное, что бы выглядело нормально. Спасибо большое

[Сергей Горностаев]

Nik Faraday, тогда вам стоит убрать подпись fullstack.

[Модератор]

Прошу прекратить флейм и флуд.

[Nik Faraday]

Сергей Горностаев, в мой стек не входит верстка, а клиентские технологии не обязывают меня знать верстку

[Сергей Горностаев]

Nik Faraday, full - значит всё полностью. Любой fullstack должен быть способен сделать решение под ключ - от анализа бизнес-требований до разработки всех элементов решения и его деплоя. Некоторые fullstack'и на себя берут даже настройку серверов и продвижение.

[Nik Faraday]

Сергей Горностаев, не уверен, что это должно входить в мой стек, по крайней мере не видел ни одной вакансии с такими требованиями