Display Icon and Input on same line and full width-CodePudding

This should be fairly simple but im having a hard time figuring this out. I want the Icon and Input to be on the same line and the Input to take up the rest of the width of the line. If i set the width:100% of the socialInput it puts them on 2 lines. If i set it to 95% when you adjust the screen smaller it will put them on 2 lines. I want it to be on 1 line all the time no matter what the screen size is

<div >
   <i ></i>
   <RadzenTextBox  Name="FacebookURL" @bind-Value="@Recipe.SocialMedia.FacebookURL" placeholder="https://www.facebook.com/" AutoComplete="false"></RadzenTextBox>
</div>

CodePudding user response：

Per tacoshy

.socialInputRow{
 display: flex;
}

.socialInput{
  flex-grow:1;
}

CodePudding user response：

Use flex. You can also use inline-block as it will work just the same with a width defined.

.flex {
  width: 100%;
  display: flex;
}

.flex { 
  /*display: inline-block;*/
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG MTw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div >
  <i ></i>
  <RadzenTextBox  Name="FacebookURL" @bind-Value="@Recipe.SocialMedia.FacebookURL" placeholder="https://www.facebook.com/" AutoComplete="false">foo</RadzenTextBox>
</div>