<style>
    .grid-holder {
        display: flex;
    }

    .leftGrid {
        flex: 0 0 150px; /* this width must match the first grid width */
    }

        .leftGrid .k-pager-wrap.k-grid-pager {
            height: 47px; /* inspect the other grid pager to see its actual height, it may vary with another theme or site-specific CSS */
        }

            .leftGrid .k-pager-wrap.k-grid-pager * {
                display:none;
            }

    .right-grid {
        flex: 1;
    }
</style>

<div class="grid-holder">
    <div class="leftGrid">
        <TelerikGrid Data="@MyData" Height="@sharedHeight" Width="150px"
                     Pageable="true" @bind-Page="@sharedPage" PageSize="@sharedPageSize">
            <GridColumns>
                <GridColumn Field="@(nameof(SampleData.Id))" />
            </GridColumns>
        </TelerikGrid>
    </div>
    <div class="right-grid">
        <TelerikGrid Data="@MyData" Height="@sharedHeight" Width="400px"
                     Pageable="true" @bind-Page="@sharedPage" PageSize="@sharedPageSize">
            <GridColumns>
                <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Width="200px" />
                <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Width="300px" />
                <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Width="1000px" />
            </GridColumns>
        </TelerikGrid>
    </div>
</div>

@code {
    int sharedPage { get; set; }
    int sharedPageSize { get; set; } = 10;
    string sharedHeight { get; set; } = "600px";

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}